CSS实现实心三角形和空心三角形[通俗易懂]

全栈程序员站长

发布于 2022-09-07 15:32:13

9140

发布于 2022-09-07 15:32:13

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

一次开发中遇到，记录代码

原理：

1.给一个div，宽和高都为0的时候，盒子什么都没有看起来。为空白

2.给一个宽高为0的盒子给一遍像素给100px的上边，下边和右边，

.jiao{ position: relative;  //box-sizing: border-box;  height: 0px;  width: 0px;  //border: 10px solid red;  border-top: 90px solid red;  border-right: 100px solid black;  border-bottom: 100px solid blue; }

这样左边没有，就会缩成一个点

效果：

这是当把上下边颜色都设置为透明色，就是一个实心定位三角形

.jiao{
  position: relative;  height: 0px;
  width: 0px;  border-top: 90px solid transparent;
  border-right: 100px solid black;
  border-bottom: 100px solid transparent;
}

效果

这样一个实心的三角新就出来了，

空心的三角形呢同理，在当前的三角形后面添加一个一个实心三角形，然后将这个三角形绝对定位到当前三角行的位置切割

.jiao:after{
  content: '';
  position: absolute;
  top: -89px;
  left: 2px;
  border-top: 89px solid transparent;
  border-right: 99px solid #FFFFFF;
  border-bottom: 99px solid transparent;
}

效果：