當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

border绘制三角形

發(fā)布時間：2024/4/15 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 border绘制三角形小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

(1)有邊框的三角形

我們來寫下帶邊框的三角形。

如果是一個正方形，我們寫邊時，會用到border，但我們這里討論的三角形本身就是border，不可能再給border添加border屬性，所以我們需要用到其他辦法。

最容易想到的，是疊加層。思路是將兩個三角形疊加在一起，外層三角形稍大一些，顏色設(shè)置成邊框所需的顏色；內(nèi)層三角形絕對定位在里面。整體就能形成帶邊框三角形的假象。

這里就涉及到一個絕對定位的問題，上、下、左、右四種方向的三角形相對于父級定位是不同的。首先我們來看下，當定位都為0（left:0px; top:0px;）時，會發(fā)生什么。

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; }

　　效果如圖：

為什么不是我們預(yù)想的如下圖的樣子呢

原因是，我們看到的三角形是邊，而不是真的具有內(nèi)容的區(qū)域，請回憶下CSS的盒子模型的內(nèi)容。

絕對定位（position:absolute），是根據(jù)相對定位父層內(nèi)容的邊界計算的。

再結(jié)合上篇我們最開始寫的寬高為0的空div:

這個空的div，content的位置在中心，所以內(nèi)部三角形是根據(jù)中心這個點來定位的。

為了看清楚一些，我們使用上一次的方法，給span增加一個陰影：

1	box-shadow:0 0 2px rgba(0,0,0,1);

　　效果如圖：

這回我們明確的知道了，內(nèi)部的三角形都是根據(jù)外部三角形實際內(nèi)容的點來定位的，而非我們?nèi)庋劭吹降娜切蔚倪吔缍ㄎ弧?/p>

HTML不變，CSS：

/*向上*/ .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)東北、東南、西北、西南三角形的寫法

繼續(xù)，來寫西北方（↖），東北方（↗），西南方（↙），東南方（↘）的三角形。

原理如圖：

根據(jù)顏色的劃分，每個可以有兩種CSS來寫，分別利用不同的邊來創(chuàng)造所需三角形。

寫一個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)東北、東南、西北、西南三角形的寫法

希望對大家有所幫助！(￣▽￣”)

題外話：發(fā)現(xiàn)CSS的許多知識點都可以挖掘出一些深層的東西，很有意思~也因為有許多值得推敲的地方，所以寫出來沒有能做到絕對精簡……

轉(zhuǎn)自:?http://crossjae.diandian.com/css/borde

轉(zhuǎn)載于:https://www.cnblogs.com/sxz2008/p/7788212.html

總結(jié)

以上是生活随笔為你收集整理的border绘制三角形的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。