css使用border畫三角形

張紅新發(fā)布于2019-08-28 18:20 / 2057人閱讀

摘要：寬度被設(shè)為的邊框?qū)?yīng)方向的邊框會(huì)形成較大的三角形，且長度加倍的采納的顯示其實(shí)也是用三角形實(shí)現(xiàn)的上部分是包含采納兩個(gè)字的塊狀元素，設(shè)置。

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

CSS創(chuàng)建三角形（小三角）的幾種方法

比較簡單實(shí)用的還是使用border來創(chuàng)建三角形，今天主要研究這個(gè)的實(shí)現(xiàn)
將邊框分別設(shè)置為紅/黃/藍(lán)/綠

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

效果如下：

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

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

效果：

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

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

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

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

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

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

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

結(jié)果是長方形，其中一邊為80一邊為40。寬度被設(shè)為0的邊框?qū)?yīng)方向的邊框會(huì)形成較大的三角形，且長度加倍

segmentfault的"采納"的顯示其實(shí)也是用三角形實(shí)現(xiàn)的

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

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