用CSS繪制三角形

hover_lew 發布于2019-08-28 18:11 / 2194人閱讀

摘要：代碼如下代碼代碼效果如下繪制此時，我們就可以根據上述的內容畫出不同朝向的三角形了，例如當我們需要一個朝上的三角形，就不需要設置上邊框，其他的以此類推。

引入

用 CSS 繪制三角形，只是對 border 屬性的簡單應用。平時使用 border 屬性的時候多留意一下，就會發現其中的技巧。下面，我們先看以下代碼：

HTML代碼：

----------
CSS代碼：
.test{
    width: 10px;
    height: 10px;
    border-top: 50px solid black;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid orange;
}

效果如下：

不難看出，當盒子內容的寬度和高度遠小于邊框的時候，邊框的顯示為等腰梯形。由此我們可以推斷，當我們將 div 的寬高都設為 0 的時候，代表盒子內容的白色正方形會消失，于此同時，邊框顯示為等腰三角形。代碼如下：

HTML代碼：

----------
CSS代碼：
.test{
    width: 0;
    height: 0;
    border-top: 50px solid black;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid orange;
}

效果如下：

繪制

此時，我們就可以根據上述的內容畫出不同朝向的三角形了，例如：當我們需要一個朝上的三角形，就不需要設置上邊框，其他的以此類推。代碼如下：

HTML代碼：




----------
CSS代碼：
.test1{
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
    border-left: 50px solid transparent;
}
.test2{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid orange;
}
.test3{
    width: 0;
    height: 0;
    border-top: 50px solid black;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}
.test4{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 50px solid red;
    border-bottom: 50px solid transparent;

效果如下：

更進一步

在實現繪制的代碼中，我們會注意到，每個三角形都有兩個邊框的 border-color 屬性被設置成 transparent。至于為什么，我們可以改變該屬性值來嘗試一下，代碼如下：

HTML代碼：

CSS代碼：
.test{
    width: 0;
    height: 0;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid orange;
}

效果如下：

對比完全設置邊框和上面少設置一項邊框的效果圖，可以看出，橙色和紅色三角形各自缺少了上面的一半。由此可知，我們必須設置三個邊框的，且位于兩側的邊框的 border-color 屬性應設置為 transparent。

總結

寫這篇總結也是看到最近有人提出該方面問題，想起當初自己做的嘗試，所以寫出來水一篇文章。寫的比較簡陋，以后有機會再做充實，請多多指導。

關于使用CSS繪制簡單圖形，推薦學習ICONO:純CSS圖標

云服務器 GPU云服務器三角形繪制 html5三角形繪制 css三角形 css三角

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111073.html

運用clip-path的純CSS形狀變換

摘要：在之前所提到繪制正多邊形的方法，算是純粹利用偽元素來完成，不過坦白說還有另外一種方法，可以將單一做更多形狀的變換，這種方法就是的，這個看起來有點眼熟，因為它原本就存在于里頭，利用掩碼剪裁的方法，連接坐標繪制掩碼區域，就可以做出許多不同的在之前所提到繪制正多邊形的方法，算是純粹利用偽元素來完成，不過坦白說還有另外一種方法，可以將單一div做更多形狀的變換，這種方法就是CSS3的clip...

wanglu1209 2019-08-29 18:39 評論0 收藏0
【基礎】在CSS中繪制三角形及相關應用

摘要：基本原理在中，我們可以利用四個屬性來繪制三角形。繪制三角形等邊三角形等邊三角形又稱正三邊形，為三邊相等的三角形，其三個內角相等，均為，它是銳角三角形的一種。簡言本文簡要闡述了用CSS邊框的方法在頁面上繪制三角形，包括幾種典型的三角形繪制，還介紹了幾個簡單的應用場景。利用邊框繪制三角形方法只是眾多方案中的一種，大家根據項目實際，選用最適宜項目的方案。 showImg(https://...

Lycheeee 2019-08-30 15:53 評論0 收藏0
前端每日實戰：166# 視頻演示如何用 CSS 創作一個 Safari LOGO

摘要：用批量生成刻度線因為刻度線有很多條，為了減少代碼量，我們用來批量創建刻度線。同時修改屬性和函數，讓它們引用這個變量的值。繪制指針指針是由個三角形組成的，對于這種成對的元素，通常都用偽元素繪制。最后，加一點動畫效果，讓指針像指南針那樣轉動。 showImg(https://segmentfault.com/img/bVbsTZD?w=400&h=399); 效果預覽按下右側的點擊預覽按...

Darkgel 2019-08-26 13:49 評論0 收藏0
前端每日實戰：166# 視頻演示如何用 CSS 創作一個 Safari LOGO

摘要：用批量生成刻度線因為刻度線有很多條，為了減少代碼量，我們用來批量創建刻度線。同時修改屬性和函數，讓它們引用這個變量的值。繪制指針指針是由個三角形組成的，對于這種成對的元素，通常都用偽元素繪制。最后，加一點動畫效果，讓指針像指南針那樣轉動。 showImg(https://segmentfault.com/img/bVbsTZD?w=400&h=399); 效果預覽按下右側的點擊預覽按...

Terry_Tai 2019-08-30 10:55 評論0 收藏0