用css建立三角形、對話方塊
阿新 • • 發佈:2021-07-18
一、場景分析
微信聊天框等:
這個小三角形有很多實現方法,我們接下來分析一下簡單的實現流程:
二、功能分析
- 先用CSS繪製一個三角形:
想想看,在CSS中,什麼屬性是跟三角形有關的呢?答案是border屬性,如下:
<div class="triangle"></div>
.triangle{
display: inline-block;
border: 30px solid;
border-color: #0072B0 #8A2BE2 #F08080 aqua;
}
解釋一下,因為該元素無內容,大小為0,所以只顯示出了4條不同顏色的邊框,正好是四個三角形的形狀,接下來我們將其他三條邊框設定顏色為透明,則可以得到一個三角形。
三、實際展示
- 一般情況下、我們使用偽類來加上三角形。
<div class="triangle">
你好,三角形!
</div>
.triangle{ display: inline-block; padding: 30px; border-radius: 2px; background-color: #55AA00; position: relative; } .triangle::after{ content: " "; position: absolute; top: 1em; right: -35px; border: 20px solid; border-color: transparent transparent transparent #55AA00; }
一個微信對話方塊完成了,上手試試吧。