我有一个UI组件,我需要创建以下徽章,请参阅徽章图像:https://i.stack.imgur.com/XeX57.png
有人可以帮助我使用CSS实现这一目标吗?
发布于 2018-08-23 12:34:51
HTML:
<div class="badge">
<div class="circle">$$</div>
<div class="trapezoid"></div>
<div class="price">$2,500</div>
<div class="arrowDown"></div>
</div>
CSS:
.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/
https://stackoverflow.com/questions/-100002371
复制相似问题