css使用border畫三角形

張紅新發布于2019-08-28 18:20 / 2047人閱讀

摘要：寬度被設為的邊框對應方向的邊框會形成較大的三角形，且長度加倍的采納的顯示其實也是用三角形實現的上部分是包含采納兩個字的塊狀元素，設置。

前端中的很多地方都會用到三角形，比如tooltip等
CSS中創建三角形的方法很多，可以參考這里：

CSS創建三角形（小三角）的幾種方法

比較簡單實用的還是使用border來創建三角形，今天主要研究這個的實現
將邊框分別設置為紅/黃/藍/綠

.triangle {
    height: 0;
    width: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 40px 40px;
}

效果如下：

四個三角形合成一個正方形，大小為80x80，如果我們只想保留其中某個三角形的話，將其它的設置為透明即可，比如(以下css未改變部分與上面相同)

.triangle {
    border-color: #ff0000 transparent transparent transparent;
    border-width: 40px 40px 40px 40px;
}

效果：

IE6不支持transparent，所以不會透明而會顯示難看的黑色，不過也有解決方法：將透明的部分對應的border-style設為dashed即可

.triangle {
    border-color: #ff0000 transparent transparent transparent;
    border-style: solid dashed dashed dashed;
    border-width: 40px 40px 40px 40px;
}

正方形按對角線平分為兩個三角形的情況

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 0 0 40px 40px;
}

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 0 40px 40px 0;
}

需要指出的是，此時正方形的大小為40x40

如果將border-width的某一邊設為0又會怎么樣呢？也算是兩種情況

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 0 40px;
}

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 40px 0;
}

結果是長方形，其中一邊為80一邊為40。寬度被設為0的邊框對應方向的邊框會形成較大的三角形，且長度加倍

segmentfault的"采納"的顯示其實也是用三角形實現的

上部分是包含"采納"兩個字的塊狀元素，設置position: relative。下部分用偽類after設置一個position: absolute的塊狀元素，將兩者接在一起。通過border-width設置成長方形而不是正方形，再將下方的三角形去掉即可，看下面的css十分明顯，這也是三角形的一個很好的應用

.accepted-flag:after {
    position: absolute;
    left: 0;
    top: 25px;
    content: "";
    border-width: 9px 18px;
    border-style: solid;
    border-color: #009a61 #009a61 transparent #009a61;
}

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

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

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

如何用css畫三角形

摘要：那問題來了，如何用來畫三角形呢別著急，先來看看我所遇到過的三角形。如下圖，有實心三角形，空心的，還有可以歸為三角形的小箭頭。畫一個三角形，首先想到的是如何畫三角形的形狀，然后給一個背景顏色。在設計稿中，經常會出現好多三角形，如果將三角形變成圖片，通過img標簽的src或者background中的url來訪問，從前端性能方面來看這并不好。那問題來了，如何用css來畫三角形呢？別著急，先...

Yuqi 2019-08-30 13:06 評論0 收藏0
使用CSS畫三角形

摘要：說到這里，大家該明白了上面的三角形圖標是怎么來的了吧元素沒有下邊框，而左右邊框又是透明的，相當于只有上圖中的上面的黑色三角形部分。所以，如果我們要做倒立三角形向右的或者向左的三角形，只需要為三角形底部設置邊框，兩腰邊框透明即可。原文 http://itindex.net/detail/487...三角形-圖標網頁中經常有一種三角形的圖標，鼠標點一下會彈出一個下拉菜單之類的（之前淘...

lifesimple 2019-08-29 11:07 評論0 收藏0
用CSS畫一個帶陰影的三角形的示例代碼

摘要：思路怎么用畫一個帶陰影的三角形呢有童鞋說這還不簡單嗎網上有很多解決方案但其實大多都是實現不太完美的存在一些問題假設我們做一個向下的三角形箭頭常見的方法大致有兩種通過邊框控制和設為透明設為預定的顏色即可通過旋轉盒子方法一可以畫三角形但是1. 思路怎么用CSS3畫一個帶陰影的三角形呢 ? 有童鞋說, 這還不簡單嗎網上有很多解決方案, 但其實大多都是實現不太完美的, 存在一些問題假設我們做一...

chunquedong 2019-04-23 11:43 評論0 收藏0
純CSS畫三角原理解析

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

lidashuang 2019-08-30 14:03 評論0 收藏0
css 實現各種基本圖形

摘要：三角形三個角分別是，此時畫五角星等價于畫三個三角形。所以理論上，通過控制一個三條的長度，進而實現不同大小的三角形是可行。實踐了一番，由于很難得到一個整數值，所以通過這種方法畫正五角形幾乎是無法實現的。三角形寫 css 的時候，用慣了背景圖，忽略了 css 本身其實可以實現很多簡單的基本圖形，比如三角形： .triangle { border-style: solid; ...

Elle 2019-08-30 13:21 評論0 收藏0