2021-1-5如何用css建立一個三角形？
阿新 • • 發佈：2021-01-06
在實際程式設計中我們經常會遇到下拉選單的下三角和一些特殊的圖形，那麼這些如何用css來實現呢？
例1
例2
例3
原理思路
仔細想想，原理非常簡單，利用CSS的border以及它的屬性值transparent來實現三角形,其中最主要的是要明白由於div的高度跟寬度都為0，margin，padding也為0，所以元素框的大小就是他的border的疊加，由於相鄰border會重疊，故存在內容寬高時其實任意一邊存在的border都是梯形的，當div內容寬高為0時，border就表現為三角形，將四個border的顏色設定為transparent表示邊框透明，而將右邊框顏色再設定為紅色就發現三角形出現了，其實這個三角形是你設定顏色的邊框。
程式碼展示：
<style>
div {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
</style>
</head>
<body>
<div> 展示結果：
如果想要不同方向的三角形，只需要改變所需的邊框顏色，另外三條邊改為transparent(透明)。那麼我們就能很簡單的實現例1和例3的效果
一些不規則的三角形只需要改變邊框的寬度就可以得到不同形狀的三角形
程式碼展示：
<style>
div{
width: 0px;
height: 0px;
border-width: 0px 0px 200px 100px;
border-style: solid;
border-bottom-color 展示結果：
如果大家有更好的解釋歡迎留言，相互交流學些！