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