border繪制三角形
阿新 • • 發佈：2017-11-05
borde 四種 晉級 pop line 都是 comment and 定位在
(1)有邊框的三角形
我們來寫下帶邊框的三角形。
如果是一個正方形，我們寫邊時，會用到border，但我們這裏討論的三角形本身就是border，不可能再給border添加border屬性，所以我們需要用到其他辦法。
最容易想到的，是疊加層。思路是將兩個三角形疊加在一起，外層三角形稍大一些，顏色設置成邊框所需的顏色；內層三角形絕對定位在裏面。整體就能形成帶邊框三角形的假象。
這裏就涉及到一個絕對定位的問題，上、下、左、右四種方向的三角形相對於父級定位是不同的。首先我們來看下，當定位都為0（left:0px; top:0px;）時，會發生什麽。
HTML：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- 向上的三角形 -->
<div class="triangle_border_up">
<span></span>
</div>
<!-- 向下的三角形 -->
<div class="triangle_border_down">
<span></span>
</div>
<!-- 向左的三角形 -->
<div class="triangle_border_left">
<span></span>
</div>
<!-- 向右的三角形 -->
<div class="triangle_border_right">
<span></span>
</div>
|
CSS:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
/*向上*/
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_up span{
display:block;
width:0;
height:0;
border-width:0 28px 28px;
border-style:solid;
border-color:transparent transparent #fc0;/*透明 透明 黃*/
position:absolute;
top:0px;
left:0px;
}
/*向下*/
.triangle_border_down{
width:0;
height:0;
border-width:30px 30px 0;
border-style:solid;
border-color:#333 transparent transparent;/*灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_down span{
display:block;
width:0;
height:0;
border-width:28px 28px 0;
border-style:solid;
border-color:#fc0 transparent transparent;/*黃 透明 透明 */
position:absolute;
top:0px;
left:0px;
}
/*向左*/
.triangle_border_left{
width:0;
height:0;
border-width:30px 30px 30px 0;
border-style:solid;
border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_left span{
display:block;
width:0;
height:0;
border-width:28px 28px 28px 0;
border-style:solid;
border-color:transparent #fc0 transparent transparent;/*透明 黃 透明 透明 */
position:absolute;
top:0px;
left:0px;
}
/*向右*/
.triangle_border_right{
width:0;
height:0;
border-width:30px 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_right span{
display:block;
width:0;
height:0;
border-width:28px 0 28px 28px;
border-style:solid;
border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黃*/
position:absolute;
top:0px;
left:0px;
}
|
效果如圖：
為什麽不是我們預想的如下圖的樣子呢
原因是，我們看到的三角形是邊，而不是真的具有內容的區域，請回憶下CSS的盒子模型的內容。
絕對定位（position:absolute），是根據相對定位父層內容的邊界計算的。
再結合上篇我們最開始寫的寬高為0的空div:
這個空的div，content的位置在中心，所以內部三角形是根據中心這個點來定位的。
為了看清楚一些，我們使用上一次的方法，給span增加一個陰影：
| 1 |
box-shadow:0 0 2px rgba(0,0,0,1);
|
效果如圖：
這回我們明確的知道了，內部的三角形都是根據外部三角形實際內容的點來定位的，而非我們肉眼看到的三角形的邊界定位。
HTML不變，CSS：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
/*向上*/
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_up span{
display:block;
width:0;
height:0;
border-width:0 28px 28px;
border-style:solid;
border-color:transparent transparent #fc0;/*透明 透明 黃*/
position:absolute;
top:1px;
left:-28px;
}
/*向下*/
.triangle_border_down{
width:0;
height:0;
border-width:30px 30px 0;
border-style:solid;
border-color:#333 transparent transparent;/*灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_down span{
display:block;
width:0;
height:0;
border-width:28px 28px 0;
border-style:solid;
border-color:#fc0 transparent transparent;/*黃 透明 透明 */
position:absolute;
top:-29px;
left:-28px;
}
/*向左*/
.triangle_border_left{
width:0;
height:0;
border-width:30px 30px 30px 0;
border-style:solid;
border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_left span{
display:block;
width:0;
height:0;
border-width:28px 28px 28px 0;
border-style:solid;
border-color:transparent #fc0 transparent transparent;/*透明 黃 透明 透明 */
position:absolute;
top:-28px;
left:1px;
}
/*向右*/
.triangle_border_right{
width:0;
height:0;
border-width:30px 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_right span{
display:block;
width:0;
height:0;
border-width:28px 0 28px 28px;
border-style:solid;
border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黃*/
position:absolute;
top:-28px;
left:-29px;
|
效果如圖：
進一步來寫氣泡框的三角形，如圖所示：
HTML：
| 1 2 3 4 5 6 |
<div class="test_triangle_border">
<a href="#">三角形</a>
<div class="popup">
<span><em></em></span>純CSS寫帶邊框的三角形
</div>
</div>
|
CSS：
.test_triangle_border{
width:200px;
margin:0 auto 20px;
position:relative;
}
.test_triangle_border a{
color:#333;
font-weight:bold;
text-decoration:none;
}
.test_triangle_border .popup{
width:100px;
background:#fc0;
padding:10px 20px;
color:#333;
border-radius:4px;
position:absolute;
top:30px;
left:30px;
border:1px solid #333;
}
.test_triangle_border .popup span{
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #333;
position:absolute;
top:-10px;
left:50%;/* 三角形居中顯示 */
margin-left:-10px;/* 三角形居中顯示 */
}
.test_triangle_border .popup em{
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #fc0;
position:absolute;
top:1px;
left:-10px;
}
|
(2)東北、東南、西北、西南三角形的寫法
繼續，來寫西北方（↖），東北方（↗），西南方（↙），東南方（↘）的三角形。
原理如圖：
根據顏色的劃分，每個可以有兩種CSS來寫，分別利用不同的邊來創造所需三角形。
寫一個nw（↖）的例子：
HTML：
| 1 |
<div class="triangle_border_nw"></div>
|
CSS(1)：
| 1 2 3 4 5 6 7 8 9 |
.triangle_border_nw{
width:0;
height:0;
border-width:30px 30px 0 0;
border-style:solid;
border-color:#6c6 transparent transparent transparent;
margin:40px auto;
position:relative;
}
|
CSS(2)：
| 1 2 3 4 5 6 7 8 9 |
.triangle_border_nw{
width:0;
height:0;
border-width:0 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #6c6;
margin:40px auto;
position:relative;
}
|
兩種CSS效果均如圖所示：
以上是利用CSS寫三角形，晉級到
(1)有邊框的三角形
(2)東北、東南、西北、西南三角形的寫法
希望對大家有所幫助！(￣▽￣”)
題外話：發現CSS的許多知識點都可以挖掘出一些深層的東西，很有意思~也因為有許多值得推敲的地方，所以寫出來沒有能做到絕對精簡……
轉自: http://crossjae.diandian.com/css/borde
border繪制三角形