整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
實際編程中我們經常會遇到下拉菜單的下三角和一些特殊的圖形，那么這些如何用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></div>
</body>如果想要不同方向的三角形，只需要改變所需的邊框顏色，另外三條邊改為transparent(透明)。那么我們就能很簡單地實現例1和例3的效果。
一些不規則的三角形只需要改變邊框的寬度就可以得到不同形狀的三角形
<style>
div{
width: 0px;
height: 0px;
border-width: 0px 0px 200px 100px;
border-style: solid;
border-bottom-color:green ;
border-left-color:transparent;
}
</style>
</head>
<body>
<div></div>
</body>展示結果：
端開發經常會遇到三角形的裝飾，今天我們來用css實現。還是一樣先上全代碼，在逐步解析。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.title {
position: relative;
padding-left: 16px;
}
.title::before {
content: "";
position: absolute;
border-width: 8px;
border-style: solid;
border-color: transparent transparent transparent red;
top: 50%;
left: 0;
margin-top: -8px;
}
</style>
<body>
<div class="title">css實現三角形</div>
</body>
</html>最終效果+元素查看
1.用div寫一個標題
<div class="title">css實現三角形</div>2.標題樣式。
設置相對定位，并設置內邊距，給三角形留下空間
.title {
position: relative;
padding-left: 16px;
}3.三角形樣式
這里用到了 ::before 偽類元素，簡單解釋下，他會在元素（本代碼中為“title”）內容前插入新的內容（本代碼content中的內容為空）。
重點：不設置元素的寬高，只設置4邊的寬度和顏色結果如下圖
給元素4邊都設置顏色和寬度
// 4邊都設置顏色
.title::before {
content: "";
position: absolute;
border-width: 8px;
border-style: solid;
border-color: blue green yellow red;
top: 50%;
left: 0;
margin-top: -8px;
}通過讓其他3邊顏色透明就能實現三角形效果，給需要顯示的三角形的邊線設置顏色。
（tip:三角形的總高是上下邊線寬度之和，所以偏移一半高度居中）
做網頁很多時候我們需要使用一個類似下拉菜單的三角形圖標，雖然用圖片和其他方法也可以實現，但是修改起來不方便，所以一般使用純CSS的方法來實現。
1.利用 border 屬性實現三角形
這個原理很簡單，我們先看下面的圖，這是一個邊框為 20px 的 div，看他的邊框，是個梯形，變化會從這里開始。
把它的寬和高都設為 0，效果如下圖：
四個邊框都變成三角形了，現在我再把它的左右和下邊框的顏色都設成透明或和背景顏色相同的顏色，就出來我們想要的三角形了。
注意：IE6下把邊框設置成 transparent 時會出現黑影，并不會透明，把 border-style 設置成 dashed 可以解決。
這樣，一個三角形就出來了！
2、利用 CSS3 transfrom 旋轉 45 度實現三角形
先創建一個帶 border 的 div ，設置好背景色和相鄰的兩個邊框的顏色，然后選擇 45 度。
注：IE6下無效。
實現樣式代碼：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
