這樣的弧度的弧線選項(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)分享給你的朋友!