首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用CSS创建此徽章?

如何使用CSS创建此徽章?
EN

Stack Overflow用户
提问于 2018-08-23 03:09:13
回答 1查看 0关注 0票数 0

我有一个UI组件,我需要创建以下徽章,请参阅徽章图像:https://i.stack.imgur.com/XeX57.png

有人可以帮助我使用CSS实现这一目标吗?

EN

回答 1

Stack Overflow用户

发布于 2018-08-23 12:34:51

HTML:

代码语言:txt
复制
<div class="badge">
  <div class="circle">$$</div>
  <div class="trapezoid"></div>
  <div class="price">$2,500</div>
  <div class="arrowDown"></div>
</div>

CSS:

代码语言:txt
复制
.badge {
  width: 88px;
  position: relative;
  text-align: center;
}

.circle {
  position: relative;
  z-index: 2;
  background: #FFFFFF;
  border: 5px solid #707070;
  border-radius: 62px;
  height: 62px;
  width: 62px;
  line-height: 62px;
  color: #707070;
  margin: 0 auto;
  font-family: Arial;
  font-size: 25px;
}

.trapezoid {
  position: absolute;
  z-index: 1;
  top: 31px;
  border-radius: 5px 5px 0 0;
  border-top: 77px solid #707070;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width: 76px;
  height: 0; 
}

.price {
  position: absolute;
  z-index: 3;
  top: 70px;
  left: 11px;
  color: #FFFFFF;
  width: 66px;
  height: 34px;
  line-height: 34px;
  border: 1px dotted #FFFFFF;
  border-width: 1px 0;
  font-family: Arial;
  font-size: 20px;
}

.arrowDown {
  position: absolute;
  top: 108px;
  left: 6px;
  width: 0; 
  height: 0;
  border: 38px solid transparent;
  border-top: 27px solid #707070;
}

https://jsfiddle.net/g6fur1cp/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100002371

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档