Effective前端1---chapter 2 用CSS畫一個三角形
阿新 • • 發佈:2018-09-29
-- 前端 highlight ive 類元 light sha 畫法 兩個
1.CSS畫三角形的畫法
第一步:三角形可以用border畫出來,首先一個有四個border的div長這樣:
<div class="triangle"></div> <style> .triangle{ margin: 100px; border-top: 40px solid #000; border-bottom: 40px solid #333; border-left: 40px solid #666; border-right: 40px solid #999; width: 100px; height: 100px; background-color: #ccc; } </style>
第二步:然後把它的寬和高都去掉,width:0;height:0;變成如下圖:
第三步:把border-top去掉,這樣就把上面的區域給裁掉了,如下圖:
border-top:none;
第四步:把左右border變為透明狀態,此時我們就得到了三角形。如下:
border-left: 40px solid transparent; border-right: 40px solid transparent;另外根據不同border的透明,可以實現斜邊不同位置的三角形;如下
2.控制三角形的角度
通過控制三角形的角度,可以實現直角三角形和等邊三角形。
首先,我們可以保持border-left和border-right大小不變,讓border-bottom不斷變大,觀察下形狀變化:
可以看到頂部的角度在不斷變小,其實就是三角形的底邊長度不變,而高在不斷變化,因為border-bottom-width就是三角形的高。
另外,我們可以讓border-left不斷變大,保持其他兩個border不變,觀察效果:
通過比較可以看出,border-left的變大增加了左邊那條邊的長度,由此可以想到,如果右邊的border-width是0的話,那麽將形成一個直角三角形。
border-right:0的狀態下,可以使一個直角三角形。
3.畫一個對話框可以常用到的三角形
首先,畫一個深色的三角形:
<div class="chat-msg"></div> .chat-msg{ width: 300px; height: 80px; border: 1px solid #ccc; position: relative; margin: 100px; } .chat-msg::before{ content: ‘‘; position: absolute; top: 34px; left: -10px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid #ccc; }
然後畫一個白色的三角形蓋上去,錯誤兩個像素,就可以實現。利用chat-msg的偽類元素after實現
.chat-msg::after{ content: ‘‘; position: absolute; top: 34px; left: -8px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid #fff; }
另外,使用filter添加陰影效果
.chat-msg{ filter: drop-shadow(0 0 2px #999); background-color: #fff; }
以上實現帶陰影三角形對話框的步驟。
Effective前端1---chapter 2 用CSS畫一個三角形