純CSS寫三角形-border法

(1)有邊框的三角形

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

image

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

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

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

HTML：

<!-- 向上的三角形 -->
<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:

/*向上*/
.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;
}

效果如圖：

image

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

image

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

image

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

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

image

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

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

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

效果如圖：

image

這回我們明確的知道了，內(nèi)部的三角形都是根據(jù)外部三角形實(shí)際內(nèi)容的點(diǎn)來定位的，而非我們?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;

效果如圖：

image

進(jìn)一步來寫氣泡框的三角形，如圖所示：

image

HTML：

<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ù)，來寫西北方（↖），東北方（↗），西南方（↙），東南方（↘）的三角形。

原理如圖：

image

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

寫一個nw（↖）的例子：

HTML：

<div class="test_triangle_border">
    <a href="#">三角形</a>
    <div class="popup">
        <span><em></em></span>純CSS寫帶邊框的三角形
    </div>
</div>

CSS(1)：


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

兩種CSS效果均如圖所示：

image

以上是利用CSS寫三角形，晉級到

(1)有邊框的三角形

(2)東北、東南、西北、西南三角形的寫法

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 各種純css圖標(biāo) CSS3可以實(shí)現(xiàn)很多漂亮的圖形，我收集了32種圖形，在下面列出。直接用CSS3畫出這些圖形，要比...
    劍殘閱讀 9,990評論 0贊 8
  • 深入理解傅里葉變換Mar 12, 2017 這原本是我在知乎上對傅立葉變換、拉普拉斯變換、Z變換的聯(lián)系？為什么要進(jìn)...
    價值趨勢技術(shù)派閱讀 5,945評論 2贊 2
  • 1、垂直對齊 如果你用CSS，則你會有困惑：我該怎么垂直對齊容器中的元素？現(xiàn)在，利用CSS3的Transform，...
    kiddings閱讀 3,311評論 0贊 11
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,180評論 1贊 92
  • 【有人說，能看懂英美的漫畫，就是半個英美問題專家了】 今年7月, 紐約, 警察懷疑43歲黑人加納販賣未繳稅香煙, ...
    2fa222542bfe閱讀 504評論 0贊 1

友情鏈接更多精彩內(nèi)容