用CSS画实心三角形和空心三角形

183 阅读 0 评论 121 点赞

我是靠谱客的博主健康芝麻，这篇文章主要介绍用CSS画实心三角形和空心三角形，现在分享给大家，希望可以做个参考。

（1）实心三角形

html

复制代码

1
<div class='sanjiao'></div>

css

复制代码

1
2
3
4
5
6
7
8
.sanjiao{
   border-left: 10px solid transparent;
   border-bottom: 10px solid red;//向上的三角
   border-right: 10px solid transparent;
   border-top: 10px solid transparent;
   width: 0px;
   height: 0px;
}

（2）空心三角形

这里画了一个正方形，不设置背景色，设置左边和上边相邻两边的border，再画两个三角形，边长为第一个三角形的对角线长度，通过旋转驾到第一个三角形的斜边上，通过两个矩形组合成一个空心的三角形

复制代码

1
2
3
4
5
6
7
.sanjiao{
  width: 100px;
  height: 100px;
  border-left: 1px solid red;
  border-top: 1px solid red;
  position: relative;
}

复制代码

1
2

复制代码

1
2
3
4
5
6
7
8
9
10
.sanjiao:after{
    content: "";
    position: absolute;
    left: 29px;
    top: 29px;
    width: 141.4px;
    height: 141.4px;
    border-left: 1px solid red;
    transform: rotate(45deg);//通过旋转来改变三角形的朝向
}