CSS3径向渐变实现优惠券波浪造型

Javanx

发布于 2019-09-04 10:29:04

1.1K0

发布于 2019-09-04 10:29:04

文章被收录于专栏：web秀web秀

很多人看到左右的波浪边框，第一想法，应该是用图片实现。现在我们就打破这一想法，用CSS搞定这个效果。

radial-gradient()

radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。

语法： background: radial-gradient(shape size at position, start-color, ..., last-color);

值	描述
shape	确定圆的类型，ellipse (默认): 指定椭圆形的径向渐变；circle ：指定圆形的径向渐变
size	定义渐变的大小，farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角；closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边；closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角；farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置，center（默认）: 设置中间为径向渐变圆心的纵坐标值；top：设置顶部为径向渐变圆心的纵坐标值；bottom：设置底部为径向渐变圆心的纵坐标值
start-color, ..., last-color	用于指定渐变的起止颜色

波浪造型的产生

<div class="coupon"></div>

这里用radial-gradient绘制一个圆，设置left为1px，top为8px，形成半圆。

.coupon {
    position: relative;
    width: 400px;
    height: 160px;
    margin: 50px auto;
    background-image: 
      radial-gradient(
        circle at 1px 8px, 
        transparent 6px, 
        #ff9e6d 6px, 
        #ff9e6d 0px);
  }

看看原本是这样，这里的left是8px

.coupon {
    ...
    background-image: 
      radial-gradient(
        circle at 8px 8px, 
        transparent 6px, 
        #ff9e6d 6px, 
        #ff9e6d 0px);
    ...
  }

设置背景大小，y轴默认平铺，x轴不允许平铺，形成多个半圆，造就波浪造型。

.coupon {
    ...
    background-image: 
      radial-gradient(
        circle at 1px 8px, 
        transparent 6px, 
        #ff9e6d 6px, 
        #ff9e6d 0px);
    background-size: 200px 18px;
    background-repeat-x: no-repeat;
    ...
  }

同理，我们添加右边波浪，

.coupon {
  ...
  background-image: 
    radial-gradient(
      circle at 1px 8px, 
      transparent 6px, 
      #ff9e6d 6px, 
      #ff9e6d 0px), 
    radial-gradient(
      circle at 199px 8px, 
      transparent 6px, 
      #ff9e6d 6px, 
      #ff9e6d 0px);
  background-size: 200px 18px;
  background-position: 0 0, 200px 0;
  background-repeat-x: no-repeat;
}

添加文字

<div class="coupon">50元</div>

用:before伪类，制作中间的虚线，:after伪类，添加“立即领取”文字。同时添加金额（50元）样式。

.coupon {
  ...
  font-size: 60px;
  color: #fff;
  font-weight: bold;
  line-height: 160px;
  padding-left: 60px;
  box-sizing: border-box;
  cursor: pointer;
}
.coupon::before {
  position: absolute;
  content: "";
  left: 240px;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed #fff;
}
.coupon::after {
  position: absolute;
  content: "立即领取";
  font-size: 26px;
  width: 70px;
  top: 50%;
  right: 2%;
  transform: translate(-50%, -50%);
  line-height: 40px;
  letter-spacing: 5px;
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019年2月22日，如有侵权请联系 cloudcommunity@tencent.com 删除

background