纯CSS画三角形

全栈程序员-站长 • 2022年6月24日下午10:16 • 未分类 • 阅读 22

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

之前遇到过的问题如果查了然后懂了，然后没有及时复盘思考，就很容易还回去，今天把许久之前的这个知识点再整理一下，一是加深自己的记忆，二也是让初学者更容易懂。

首先，创建一个空的div
<div class="triangle"></div>
然后，CSS处理它的边框，给它不一样的颜色，好观察

.triangle{ border-left:100px solid red; border-right:100px solid black; border-top:100px solid green; border-bottom:100px solid pink; ·}

结果，运行出来是这样的
这里写图片描述
div的宽占据了整个浏览器，因为我们没有给它设置宽度高度，它的值是auto，所以就占据了整个浏览器，导致我们的上下边框特别的长。
这时，我们给它设置一下宽度

.triangle{ width:0; border-left:100px solid red; border-right:100px solid black; border-top:100px solid green; border-bottom:100px solid pink; }

结果是这样子的
这里写图片描述
这个结果我非常满意，看到这里你们应该也知道三角形怎么截取了，而且是任意方向（上下左右）的三角形。
解释一下
四个方向的border其实是有重叠部分的，在四条边框都有值的情况下，左上角的正方形就由左边框和上边框分割，以此类推，而左矩形理所应当是归属左边距，以此类推。
上面的图形，因为宽高为0，所以其实只有四个正方形在被分割，所以也才会呈现四个三角形。
为了更形象的表达，我给div加了宽高

    .triangle{ width:50px; height:50px; border-left:100px solid red; border-right:100px solid black; border-top:100px solid green; border-bottom:100px solid pink; }

然后是这样子的
这里写图片描述
这样子，你们就很清楚的知道边框是怎么分割的以及它为什么会呈现这个图案，下面我手动分割@依旧不懂的同学，到这里你应该懂我说的了。

回到原来的问题，我们应该怎么得到三角形呢？
有的同学可能会以为是直接把其他三个方向的边框去掉，那你会发现，div不见了！因为任意三个方向的边框为0，都会使4个正方形都消失，只剩下一个矩形，然而我们的宽高为0，因此，就使图形消失。再来看看这个图案。

比如我们想得到向右的三角形
那么，我先去掉右边的边框总可以吧，这样子就会去掉蓝色框框内的内容

呈现这样子

再想一步，怎么才能让绿色的块和粉红色的块去掉，有同学想，我们把它们设置成背景颜色就好啦！于是就有人设置成默认的白色。
这里写图片描述
看似我们把三角形画出来，但是假如换了一个背景色，我们就要手动去换边框的颜色，这里介绍一个属性值：transparent，表示透明。
完整的CSS如下：

    .triangle{ width:0px; border-left:100px solid red; border-top:100px solid transparent; border-bottom:100px solid transparent; }

CSS画三角形的介绍就到这里，大家也可以用span标签来话，但是会发现有一个纵向的高度，一开始我以为是line-height导致的，试了一下，发现是font-size导致的，所以只要把font-size设置为0就ok了，完整的CSS如下：

    .triangleSpan{ font-size: 0; border-left:100px solid red; border-top:100px solid transparent; border-bottom:100px solid transparent; }

假如你们不满足于四个方向的三角形，那么可以运用CSS3的属性，随便你旋转

div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ }