應(yīng)用場(chǎng)景
【1】領(lǐng)券中心（優(yōu)惠券，商品優(yōu)惠券壕曼，禮包券等等）
【2】?jī)?yōu)惠券（多種布局混合多種版式的券樣式）
【3】cms后臺(tái)管理促銷頁
image.png
調(diào)研淘寶和京東的WAP站點(diǎn)苏研，會(huì)發(fā)現(xiàn)他們的都是使用的背景圖來實(shí)現(xiàn)的優(yōu)惠券的摳角，當(dāng)然使用背景圖就可以任意變換（設(shè)計(jì)成什么樣就是什么樣）但是存在的問題就是多個(gè)促銷部門運(yùn)營(yíng)部門的個(gè)性化券樣式成本比較高（每一個(gè)樣式都需要設(shè)計(jì)出一張圖）所以我們?cè)贑MS配置優(yōu)惠券模塊添加上拾色器通過下面列出的【解決方案】實(shí)現(xiàn)了腮郊，一次性開發(fā)不僅節(jié)約設(shè)計(jì)成本還滿足多種業(yè)務(wù)運(yùn)營(yíng)需求摹蘑。
image.png
解決方案
【1】通過css元素疊加來實(shí)現(xiàn)摳角（缺點(diǎn)：不能透過背景后面的圖片或者背景色）
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
/*body{
background-color: red
}*/
.semi-circle {
width: 200px;
height: 400px;
margin: 200px auto;
position: relative;
background: #000000;
border-radius: 8px;
}
.semi-circle:after {
position: absolute;
content: "";
width: 20px;
height: 20px;
background: #fff;
border-radius: 100%;
right: 0;
top: 50%;
transform: translate(50%, -50%);
}
.semi-circle:before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background: #fff;
border-radius: 100%;
left: 0;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="semi-circle"></div>
</body>
</html>
【2】通過SVG或者字體圖標(biāo)來實(shí)現(xiàn)（缺點(diǎn)：比較適合邊元素比如邊緣鋸齒的）
image.png
image.png
這塊的代碼就不寫了
【3】通過css3徑向漸變畫出缺角（圓角扣角）
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
body {
background: linear-gradient(90deg, #fff, #bbb);
}
div {
position: relative;
width: 20vw;
height: 8vw;
margin: 1vw auto;
border-radius: 1vmin;
// background: #e91e63;
overflow: hidden;
line-height: 8vw;
color: #fff;
text-align: center;
}
.linear {
background-size: 100% 100%;
background-image: radial-gradient(circle at 20% 0, transparent 0, transparent 2vw, #03A9F5 2vw);
background-repeat: no-repeat;
}
.linear2 {
background-size: 49.9% 50%;
background-image: radial-gradient(circle at 50% 100%, transparent 0px, transparent 10px, rgb(203, 23, 227) 10px), radial-gradient(circle at 0% 0%, transparent 0px, transparent 0px, rgb(203, 23, 227) 0px), radial-gradient(circle at 50% 0px, transparent 0px, transparent 10px, rgb(203, 23, 227) 10px), radial-gradient(circle at 0% 0%, transparent 0px, transparent 0px, rgb(203, 23, 227) 0px);
background-repeat: no-repeat;
background-position: right bottom, left top, right top, left bottom;
}
</style>
</head>
<body>
<div class="linear">使用徑向漸變實(shí)現(xiàn)內(nèi)切圓角</div>
<div class="linear2">徑向漸變實(shí)現(xiàn)內(nèi)切圓角可以是4邊</div>
</body>
</html>
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" />
<link rel="stylesheet" >
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<style>
body {
background: linear-gradient(90deg, #fff, #bbb);
}
div {
position: relative;
width: 20vw;
height: 8vw;
margin: 1vw auto;
border-radius: 1vmin;
// background: #e91e63;
overflow: hidden;
line-height: 8vw;
color: #fff;
text-align: center;
}
.shadow {
&::before {
position: absolute;
content: "";
top: -2vw;
left: -2vw;
width: 4vw;
height: 4vw;
border-radius: 50%;
box-shadow: 0 0 0 25vw #e91e63;
z-index: -1;
animation: shadowmove 10s infinite;
}
}
.shadow2 {
&::before {
position: absolute;
content: "";
top: -2vw;
left: -2vw;
width: 4vw;
height: 4vw;
border-radius: 50%;
box-shadow: 0 0 0 15vw #e91e63;
z-index: -1;
}
&::after {
position: absolute;
content: "";
bottom: -2vw;
right: -2vw;
width: 4vw;
height: 4vw;
border-radius: 50%;
box-shadow: 0 0 0 15vw #e91e63;
z-index: -1;
}
}
@keyframes shadowmove {
0%{
background: #e91e63;
box-shadow: 0 0 0 0 #e91e63;
}
10% {
background: transparent;
box-shadow: 0 0 0 0 #e91e63;
}
50% {
background: transparent;
box-shadow: 0 0 0 25vw #e91e63;
}
}
.linear {
background-size: 100% 100%;
background-image: radial-gradient(circle at 0 0, transparent 0, transparent 2vw, #03A9F5 2vw);
background-repeat: no-repeat;
}
.linear2 {
background-size: 70% 70%;
background-image:
radial-gradient(circle at 100% 100%, transparent 0, transparent 2vw, #03A9F5 2vw),
radial-gradient(circle at 0 0, transparent 0, transparent 2vw, #03A9F5 2vw),
radial-gradient(circle at 100% 0, transparent 0, transparent 2vw, #03A9F5 2vw),
radial-gradient(circle at 0 100%, transparent 0, transparent 2vw, #03A9F5 2vw);
background-repeat: no-repeat;
background-position: right bottom, left top, right top, left bottom;
}
</style>
</head>
<body>
<div class="shadow">使用陰影的擴(kuò)散半徑實(shí)現(xiàn)內(nèi)切圓角</div>
<div class="shadow2">陰影實(shí)現(xiàn)缺點(diǎn)，單個(gè)標(biāo)簽最多是2邊</div>
<div class="linear">使用徑向漸變實(shí)現(xiàn)內(nèi)切圓角</div>
<div class="linear2">徑向漸變實(shí)現(xiàn)內(nèi)切圓角可以是4邊</div>
</body>
</html>
【4】通過radial-gradient配合CSS遮罩mask
image.png
使用以下兩者配合實(shí)現(xiàn)左右邊的鋸齒
CSS radial-gradient徑向漸變函數(shù)
CSS遮罩mask
background-image: linear-gradient(180deg, #853CEE 0%, #701EE5 100%);
//圓角開始的位置0.07rem 0.12rem轧飞，圓角的大小 0.07rem
-webkit-mask-image: radial-gradient(circle at 0.07rem 0.12rem, #0000 0.07rem, red 0);
mask-image: radial-gradient(circle at 0.07rem 0.12rem, #0000 0.07rem, red 0);
//整個(gè)遮罩的偏移量-0.07rem
-webkit-mask-position: -0.07rem;
mask-position: -0.07rem;
//圓角的間距
-webkit-mask-size: 100% 0.21rem;
mask-size: 100% 0.21rem;
【5】通過radial-gradient配合偽類
image.png
image.png
image.png
image.png
源碼博客地址
福利題外話：在線小工具生成異形直角型元素CSS clip-path 生成器
image.png
image.png
