實心三角形

方式一

triangle.jpg

.triangle {
    width: 0px;
    height: 0px;
    border-width: 100px;
    border-style: solid;
    border-color: green purple yellow blue;
}

如果需要哪個方向的按鈕，只需要修改邊框?qū)挾?，保留對?yīng)位置的顏色，其他的顏色設(shè)置為透明transparent

.triangle {
    width: 0px;
    height: 0px;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent yellow transparent;
}

方式二

triangle2.jpg

當(dāng)一個邊沒有的時候，它會縮小成一個點，這時就形成了一個三角形

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: 100px solid yellow;
    border-left: 90px solid black;
    border-right: 90px solid black;
}

如果需要哪個方向的三角形，就將這個方向的顏色保留，相對方向的樣式去掉，相鄰兩個方向的顏色設(shè)置為透明transparent

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: 100px solid yellow;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}

空心三角形

只需要先實現(xiàn)一個實心三角形，再實現(xiàn)一個相同的白色實心三角形，將白色實心三角形定位在之前的三角形上面，此時就形成了一個空心三角形。

白底邊線

.triangle-line {
  position: absolute;
  top: -11px;
  right: 24px;
  z-index: 999;
  height: 0px;
  width: 0px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid rgba(80,80,80,0.1);
}
.triangle-line::after {
  content: '.';
  position: absolute;
  top: 3px;
  right: -5px;
  z-index: 999;
  height: 0px;
  width: 0px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid rgba(255,255,255,1);
}

參考文章

形狀實現(xiàn)
表情實現(xiàn)

網(wǎng)站導(dǎo)航

網(wǎng)站導(dǎo)航