您好,登錄后才能下訂單哦!
小編給大家分享一下css實現(xiàn)氣泡的小尖角效果,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
效果圖(邊框顏色太淡,放在{}里面):
{ }
參考鏈接 純CSS氣泡效果
需要用到的知識點:
當div的寬度和高度都是0時,整個邊框是由四個三角形組成的,每一邊為一個三角形,利用這點,來做小尖角,比如如下:
把不需要的三邊的邊框的顏色設(shè)置為與背景相同,這樣就得到想要的小尖角,然后再利用定位調(diào)整一下位置就可以了。
上面的方法可以得到一個帶有顏色的小尖角,但是效果圖是顯示帶有邊框的小金角。所以在已有的基礎(chǔ)上,出現(xiàn)兩個小尖角,然后進行疊加,利用z-index屬性來顯示。因為需要兩個,可以利用偽元素,這樣就不會出現(xiàn)無語義化的元素,代碼如下:
&::before { content: ""; display: block; width: 0; height: 0; border: solid 10px; border-color: #E9E9E9 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); position: absolute; top: 208px; left: 40px; z-index: 2; } &::after { content: ""; display: block; width: 0; height: 0; border: solid 8px; border-color: #fff rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); position: absolute; top: 207px; left: 41.5px; z-index: 3; }
看完了這篇文章,相信你對“css實現(xiàn)氣泡的小尖角效果”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。