純CSS畫三角原理解析

lidashuang 發布于2019-08-30 14:03 / 2818人閱讀

摘要：純畫三角原理解析因為之前做一個頁面出現了很多三角，開始直接用圖片感覺并不是很好用，看著總是怪怪的顏色還很難調整的跟背景一樣，就搜了一波代碼直接用上了，事后想了一下感覺不知道具體原理是什么，很奇怪為什么邊框能設置成三角的樣式。

純CSS畫三角原理解析

因為之前做一個頁面出現了很多三角，開始直接用圖片感覺并不是很好用，看著總是怪怪的顏色還很難調整的跟背景一樣，就搜了一波代碼直接用上了，事后想了一下感覺不知道具體原理是什么，很奇怪為什么邊框能設置成三角的樣式。于是搜了一波原理整理如下

1.邊框到底是什么樣的？

因為很少用到很粗的邊框，而且90%的情況下我們用邊框都是一個顏色的。所以我發現我并不知道邊框到底是什么樣子的，一直一來我都以為四條邊都是一條線（不要告訴我就我一個人這樣認為）。

實驗了一下才發現邊框越來越粗的時候，很明顯每條邊都是一個梯形

2.如何做出三角？

因為之前看的代碼都會寫上width: 0; height: 0;當時不理解為什么，現在很容易就能想到，用極限的思維，當內容大小趨近與零的時候,每個邊就是一個三角了。

這個時候就可以看到三角已經出現，我們要做的就是把其他邊設置為透明的就可以得到我們需要的三角了。

3.還有沒有更多的情況？

通過分別取消邊框發現下面幾種情況：

取消一條邊的時候，與這條邊相鄰的兩條邊的接觸部分會變成直的

當僅有鄰邊時，兩個邊會變成對分的三角

當保留邊沒有其他接觸時，極限情況所有東西都會消失。

4.拓展

明白了這些之后，再看代碼是不是感覺就很清晰了呢？然后我們就可以做出更多形狀的三角。有了這些形狀再加上旋轉屬性，基本所有的場景都能使用。

直角三角

.box {
    /* 內部大小 */
    width: 0px;
    height: 0px;
    /* 邊框大小 只設置三條邊*/
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-left: transparent solid;
    border-width: 85px; 
    /* 其他設置 可有可無*/
    margin: 50px;
}

更小的直角三角形

利用對邊的情況，做出更小的直角三角形

.box {
    /* 內部大小 */
    width: 0px;
    height: 0px;
    /* 邊框大小 只設置兩條邊*/
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-width: 85px; 
    /* 其他設置 */
    margin: 50px;
}

等腰銳角三角形

通過更改底邊的長度可以做出各種不同的三角形

.box {
    /* 內部大小 */
    width: 0px;
    height: 0px;
    /* 邊框大小 */
    border-top: #4285f4 170px solid;
    border-right: transparent 85px solid;
    border-left: transparent 85px solid;
     
    /* 其他設置 */
    margin: 50px;
}

對話氣泡

把偽元素設置成三角，再通過定位確定位置，就可以制作出來經典的對話氣泡了。

.bubbly {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #00ccbb;
    border-radius: 8px;
    width: 200px;
    padding: 40px 10px;
    text-align: center;
    color: white;
    font-size: 20px;

.bubbly:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border: 34px solid transparent;
    border-top-color: #00ccbb;
    border-bottom: 0;
    border-left: 0;
    margin: 0 0 -34px -17px;
}

總結

通過對四條邊的長度的設置，還可以做出各種各樣的三角形，幾乎所有三角的形狀都可以設置出來。
另外還可以通過設置寬高中的一項為0另一個不為0，來設置出體形的形狀，大家可以自由實驗

GPU云服務器云服務器畫三角形 html畫三角箭頭純CSS css三角

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

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

純css三角形及其應用

摘要：前言對于氣泡對話框或者與內容連接部分會有小三角形效果，可能在以前直接用圖片去實現，其實用純即可實現，下面要實現的效果分別是微信對話框和面包屑，以此回顧記錄一下。前言對于氣泡對話框或者Popover與內容連接部分會有小三角形效果，可能在以前直接用圖片去實現，其實用純css即可實現，下面要實現的效果分別是微信對話框和面包屑，以此回顧記錄一下。效果如下： showImg(https:/...

aaron 2019-08-30 14:04 評論0 收藏0
SegmentFault 技術周刊 Vol.38 - 神奇的 CSS

摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 評論0 收藏0
前端每日實戰 2018 年 5 月份項目匯總（共 30 個項目）

摘要：過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演過往項目 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 5 月份發布的項目《前端每日實戰》專欄每天分解一個前端項目，用視頻記錄...

array_huang 2019-08-22 18:25 評論0 收藏0
前端每日實戰 2018 年 5 月份項目匯總（共 30 個項目）

摘要：過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演過往項目 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 5 月份發布的項目《前端每日實戰》專欄每天分解一個前端項目，用視頻記錄...

liaoyg8023 2019-08-30 15:54 評論0 收藏0