纯CSS优惠券样式

最新推荐文章于 2024-06-12 14:22:32 发布

爱宇阳

最新推荐文章于 2024-06-12 14:22:32 发布

阅读量494

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_34707272/article/details/137785492

版权

本文介绍了如何使用HTML和CSS创建一个具有圆角渐变效果的coupon-box布局，可通过删除宽度和高度属性实现自适应设计。

摘要由CSDN通过智能技术生成

HTML

<div class="coupon-box">
  <div class="coupon-box-top"></div>
  <div class="coupon-box-bottom"></div>
</div>

CSS


.coupon-box {
  width: 702px;
}

.coupon-box-top,
.coupon-box-bottom {
  position: relative;
  padding: 24px 28px;
}

.coupon-box-top {
  width: 100%;
  height: 50px;
  background:
    radial-gradient(circle at bottom right, transparent 16px, #fff 0) no-repeat bottom right,
    radial-gradient(circle at bottom left, transparent 16px, #fff 0) no-repeat bottom left;
  background-size: 50% 100%;
  border-radius: 8px 8px 0 0;
}

.coupon-box-top::after {
  content: ' ';
  height: 1px;
  position: absolute;
  left: 16px;
  bottom: 0;
  right: 16px;
  border-bottom: 1px dashed #D9D9D9;
}

.coupon-box-bottom {
  width: 100%;
  height: 100px;
  background:
    radial-gradient(circle at top left, transparent 16px, #fff 0) no-repeat top left,
    radial-gradient(circle at top right, transparent 16px, #fff 0) no-repeat top right;
  background-size: 50% 100%;
  border-radius: 0 0 8px 8px;
}