CSS不使用背景图片实现优惠券样式的反圆角、凹圆角、反半圆角、背景渐变
日常开发过程中,特别是商城相关应用开发过程中,时常会遇到花里胡哨的设计图,比如优惠券样式,上图:实现思路如下:1.先写一个外容器,实现背景色渐变:Html:1 <div class="coupon">
2021-10-23 13:23:23
349
border-radius: 50%;
{ width: 40px; height: 40px; border: 70px solid red; border-radius: 90px; }3. 半圆
{ width: 180px; height: 90px; border-radius: 90px 90px 0 0; }
4. 四分之一圆
{ width: 90px; height: 90px; border-radius: 90px 0 0 0; }
5. 四分之一扇形
{ width: 0px; height: 0px; border: 90px solid transparents; border-bottom-color: red; border-radius: 90px; // 无此句,则为三角形 }
13
2022-09
23
2021-10
31
2021-07