這樣的弧度的弧線選項(xiàng)卡你知道用 CSS 怎么做嗎沮翔？
是不是又要去找 UI 小姐姐了云稚？
我是渡一前端子辰老師
讓我們一起探索這個(gè)有趣的技巧吧届氢。
實(shí)現(xiàn)步驟
要實(shí)現(xiàn)這樣的弧度弧線選項(xiàng)卡促脉，我們可以分為四個(gè)步驟：
- 第一步剿骨，創(chuàng)建一個(gè)矩形
- 第二步代芜，給矩形的左上角和右上角設(shè)置圓角
- 第三步，在矩形的左右兩邊加上小方塊浓利，并且讓方塊靠下
- 第四步挤庇，把小方塊變成弧形的角，并且旋轉(zhuǎn)整個(gè)元素
第一步：創(chuàng)建一個(gè)矩形
要?jiǎng)?chuàng)建一個(gè)矩形贷掖，我們可以利用 CSS 中的 width 和 height 屬性來(lái)設(shè)置元素的寬度和高度嫡秕，然后用 background 屬性來(lái)設(shè)置元素的背景色。
例如苹威，要?jiǎng)?chuàng)建一個(gè)150px寬40px高的紅色矩形昆咽，我們可以這樣寫(xiě)：
.tab {
width: 150px;
height: 40px;
background: #ed6a5e;
}
第二步：給矩形的左上角和右上角設(shè)置圓角
要給矩形的左上角和右上角設(shè)置圓角，我們可以利用 CSS 中的 border-radius 屬性來(lái)設(shè)置元素邊框的圓角半徑牙甫。
例如掷酗，要給矩形的左上角和右上角設(shè)置 10px 的圓角，我們可以這樣寫(xiě)：
.tab {
width: 150px;
height: 40px;
background: #ed6a5e;
border-radius: 10px 10px 0 0;
}
第三步：在矩形的左右兩邊加上小方塊腹暖，并且讓方塊靠下
要在矩形的左右兩邊加上小方塊汇在，并且讓方塊靠下，我們可以利用 CSS 中的偽元素 ::before 和 ::after 來(lái)創(chuàng)建兩個(gè)附加在元素前后的內(nèi)容脏答，并且用 position 屬性來(lái)設(shè)置元素的定位方式糕殉。
例如亩鬼，要在矩形的左右兩邊各加一個(gè) 10px 寬 10px 高并且跟矩形同色的小方塊，并且讓方塊靠下對(duì)齊阿蝶，我們可以這樣寫(xiě)：
.tab {
width: 150px;
height: 40px;
background: #ed6a5e;
border-radius: 10px 10px 0 0;
position: relative; /* 設(shè)置相對(duì)定位 */
}
.tab::before,
.tab::after {
content: ""; /* 設(shè)置空內(nèi)容 */
position: absolute; /* 設(shè)置絕對(duì)定位 */
width: 10px; /* 設(shè)置寬度 */
height: 10px; /* 設(shè)置高度 */
bottom: 0; /* 設(shè)置底部對(duì)齊 */
background: #ed6a5e; /* 設(shè)置背景色 */
}
.tab::before {
left: -10px; /* 設(shè)置左邊位置 */
}
.tab::after {
right: -10px; /* 設(shè)置右邊位置 */
}
第四步：把小方塊變成弧形的角雳锋，并且旋轉(zhuǎn)整個(gè)元素
要把小方塊變成弧形的角，我們可以利用CSS中的徑向漸變radial-gradient屬性來(lái)設(shè)置元素背景色從中心向外漸變羡洁。
例如玷过，要把左邊小方塊變成弧形，我們可以這樣寫(xiě)筑煮。
右邊的小方塊以同樣的方式設(shè)置辛蚊。
.tab::before,
.tab::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
bottom: 0;
}
.tab::before {
left: -10px;
/* 設(shè)置徑向漸變 */
background: radial-gradient(circle at 0 0,
transparent 10px,
#ed6a5e 10px);
}
.tab::after {
right: -10px;
/* 設(shè)置徑向漸變 */
background: radial-gradient(circle at 10px 0,
transparent 10px,
#ed6a5e 10px);
}
現(xiàn)在跟我們想要的還是有不小的差距的，弧度有很大的差別真仲。
之前的很多同學(xué)都會(huì)做袋马，但是到這一步就會(huì)卡住很多人了。
我們發(fā)揮想象力換個(gè)角度看秸应，把整個(gè)元素旋轉(zhuǎn)一下虑凛。
我們以元素底部的中心位置為變形原點(diǎn)來(lái)旋轉(zhuǎn)。
.tab {
width: 150px;
height: 40px;
margin: 50px auto;
background: #ed6a5e;
border-radius: 10px 10px 0 0;
position: relative;
/* 設(shè)置變形原點(diǎn) */
transform-origin: center bottom;
/* 景深 40px 旋轉(zhuǎn) 30deg */
transform: perspective(40px) rotateX(30deg);
}
現(xiàn)在我們就搞定了软啼。
那里邊的文字怎么辦呢桑谍？能寫(xiě)在里邊嗎？
答案是不能的祸挪，因?yàn)槟菢拥脑捨淖謺?huì)跟著元素一起旋轉(zhuǎn)不好調(diào)整锣披。
文字可以單獨(dú)提出去，用絕對(duì)定位跟元素進(jìn)行重合匕积。
總結(jié)
這篇文章介紹了如何用CSS實(shí)現(xiàn)弧度弧線選項(xiàng)卡的方法盈罐。我們分析了目標(biāo)效果，然后按照四個(gè)步驟來(lái)實(shí)現(xiàn)：
- 第一步闪唆，創(chuàng)建一個(gè)矩形
- 第二步盅粪，給矩形的左上角和右上角設(shè)置圓角
- 第三步，在矩形的左右兩邊加上小方塊悄蕾，并且讓方塊靠下
- 第四步票顾，把小方塊變成弧形的角，并且旋轉(zhuǎn)整個(gè)元素
在第四步中帆调，我們使用了CSS中的徑向漸變和變換屬性來(lái)設(shè)置元素背景色和旋轉(zhuǎn)角度奠骄。
我們還使用了偽元素和絕對(duì)定位來(lái)創(chuàng)建和調(diào)整小方塊。
這個(gè)技巧考察了我們對(duì) CSS 的掌握程度番刊，以及對(duì)視覺(jué)效果的理解能力含鳞。
希望這篇文章能夠幫助你學(xué)習(xí)和鞏固這些知識(shí)點(diǎn)。
如果你有什么問(wèn)題或建議芹务，請(qǐng)?jiān)谠u(píng)論區(qū)留言蝉绷，如果你覺(jué)得這篇文章有用鸭廷，請(qǐng)分享給你的朋友！
