圖解利用CSS實現三角形

時間 2019-12-06

標籤圖解利用 css 實現三角形欄目 CSS 简体版

原文原文鏈接

利用CSS的border以及它的屬性值transparent來實現三角形,其中最主要的是要明白因爲div的高度跟寬度都爲0，margin，padding也爲0，因此元素框的大小就是他的border的疊加，因爲相鄰boder會重疊，故存在內容寬高時其實任意一邊存在的border都是梯形的，當div內容寬高爲0時，border就表現爲三角形，將四個border的顏色設置爲transparent表示邊框透明，而將右邊框顏色再設置爲紅色就發現三角形出現了，其實這個三角形是右邊框。css

<!DOCTYPE html>
<html>
<body>
    <style> 
        #triangle-up { 
            width: 0px; 
            height: 0px;
            border: 100px solid transparent;
            border-right:  100px solid red;
         }
    </style>
    <div id="triangle-up"></div>
</body>
</html>

圖解html

正常的框模型，div的內容width以及height均爲50px.黑線劃出來的區域就是它的右邊框，呈現爲一個梯形

<!DOCTYPE html>
<html>
<body>
    <style> 
        #triangle-up { 
            width: 50px; 
            height: 50px;
            border: 100px solid red; 
            border-bottom: 100px solid red;
         }
    </style>
    <div id="triangle-up"></div>
</body>
</html>

當div的內容width以及height均爲0.黑線劃出來的區域就是它的右邊框，呈現爲一個三角形

<!DOCTYPE html>
<html>
<body>
    <style> 
        #triangle-up { 
            width: 0px; 
            height: 0px;
            border: 100px solid red; 
         }
    </style>
    <div id="triangle-up"></div>
</body>
</html>

當div的內容width以及height均爲0.上下左邊框都爲透明的時候，只有右邊框顯示爲紅色，三角形就看到了

<!DOCTYPE html>
<html>
<body>
    <style> 
        #triangle-up { 
            width: 0px; 
            height: 0px;
            border: 100px solid transparent;
            border-right:  100px solid red;
         }
    </style>
    <div id="triangle-up"></div>
</body>
</html>

結合css其餘特性定能作出更有趣的一些效果！segmentfault

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。