css实现实心三角形和空心三角形

实心三角形

方式一

triangle.jpg

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

如果需要哪个方向的按钮，只需要修改边框宽度，保留对应位置的颜色，其他的颜色设置为透明transparent

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

方式二

triangle2.jpg

当一个边没有的时候，它会缩小成一个点，这时就形成了一个三角形

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

如果需要哪个方向的三角形，就将这个方向的颜色保留，相对方向的样式去掉，相邻两个方向的颜色设置为透明transparent

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

空心三角形

只需要先实现一个实心三角形，再实现一个相同的白色实心三角形，将白色实心三角形定位在之前的三角形上面，此时就形成了一个空心三角形。

白底边线

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

参考文章

形状实现
表情实现

网站导航

网站导航