帮我用css3生成一个优惠券的样式,用代码实现
时间: 2024-05-06 15:21:04 浏览: 225
好的,下面是帮您生成优惠券的 CSS3 代码,请参考:
```
/* 优惠券样式 */
.coupon {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px #aaa;
display: inline-block;
padding: 20px;
position: relative;
}
.coupon:before, .coupon:after {
content: "";
position: absolute;
}
.coupon:before {
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
.coupon:after {
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -10px;
left: 50%;
transform: translateX(-50%);
}
/* 优惠码样式 */
.coupon .code {
background-color: #f2f2f2;
border-radius: 5px;
color: #666;
display: inline-block;
font-size: 24px;
font-weight: bold;
padding: 5px 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
使用时只需要在 HTML 中加上 `.coupon`、`.coupon .code` 两个类名即可。
阅读全文