利用css构造一个三角形,css3实现三角形
在一些经典著作中，经常可以看到有一个关于CSS的问题：如何用CSS绘制三角形，常见的答案通常只有一种绘制带边框三角形的方法。
但是，CSS发展到今天，仅仅用CSS来画三角形，其实也有很多有趣的方法。本文将详细列出它们。
通过这篇文章，你可以学习用CSS绘制三角形的六种方法，而且都非常容易掌握。
当然，本文只是一个引玉的方法，CSS日新月异，本文可能会遗漏一些有趣的方法。欢迎在留言区添加他们~
使用 border 绘制三角形
利用边框实现三角形应该大部分人都掌握了，经常出现在各种被子里。使用高度和宽度为零的容器和透明边框实现。
简单的代码如下：
div { border-top: 50px纯黄绿色；边框-底部：50px纯色深粉色；边框-左侧：50px实心素汤；border-right: 50px固体巧克力；}高度和宽度为零的容器，设置不同颜色的边框：
这样，如果任何三边边框的颜色都是透明的，就非常容易得到各种角度的三角形：
使用边框实现三角形
使用 linear-gradient 绘制三角形
接下来我们用线性渐变linear-gradient实现三角形。
它的原理也很简单。我们意识到一个45的梯度：
div { width:100px；高度：100px背景：线性渐变(45度，深粉色，黄绿色)；}
让它的颜色从渐变变成两种固定的颜色：
div { width:100px；高度：100px背景：线性渐变(45度，深粉色，深粉色50%，黄绿色50%，黄绿色100%)。}
使其中一种颜色透明：
div {背景：线性渐变(45度、深粉色、深粉色50%、透明50%、透明100%)。}
通过旋转或缩放，我们还可以得到各种角度和大小的三角形。完整演示可以戳这里：
CodePen演示-使用线性渐变实现三角形。
使用 conic-gradient 绘制三角形
还是一个渐变。如上所述，我们使用线性梯度来实现三角形。有趣的是，在渐变族中，角渐变圆锥-渐变也可以用来实现三角形。
方法是可以设置角度梯度的中心点，也可以设置类似径向梯度的中心点。
我们将角度渐变的中心点设置为50% 0，即中心顶部，容器的顶部中间，然后将角度渐变到一定的角度范围，都是三角形的形状。
假设我们有一个高度和宽度为200px x 100px的容器，并将其角度渐变的中心点设置为50% 0:
并将其设置为从90开始绘制角度渐变图，如下图所示：
你可以看到，在开始的时候，角渐变图形在到达第二条边之前都是三角形。我们可以通过选择一个合适的角度很容易地得到一个三角形：
div {背景：圆锥形渐变(从50% 0处的90度，深粉色0，深粉色45度，透明45.1度)；}
在上面的代码中，使用了deeppink45deg、transparent 45.1deg和extra 0.1deg来简单消除渐变带来的锯齿效果。这样，我们可以很容易地通过圆锥梯度得到一个三角形。
同样，通过旋转rotate或scale，我们也可以得到各种角度和大小的三角形。完整的演示可以戳这里：
CodePen演示-三角形是用角度梯度实现的。
字体这种方法很传统。使用变换：溢出旋转：隐藏。一看到就能学会。简单的动画图如下：
将图形的旋转中心设置在左下角的左下方，旋转到与overflow: hidden匹配。
完整代码：三角形{宽度：141px高度：100px位置：相对；溢出：隐藏；在{内容： 之前；位置：绝对；top:0；左：0；右：0；底部：0；背景：深粉色；变换-原点：左下；变换：旋转(45度)；}}CodePen Demo-transform: rotate配合overflow: hidden实现三角形。
transform: rotate 配合 overflow: hidden 绘制三角形
clip-path一个非常有趣的CSS属性。
Clip-path CSS属性可以创建一个剪辑区域，在该区域中只能显示元素的一部分。局部显示在区域内，隐藏在区域外。剪辑区域是由引用的嵌入URL定义的路径或外部SVG的路径。
也就是说，使用clip-path可以把一个容器剪成我们想要的任何形状。
通过三个坐标点，实现一个多边形，多余的空间会被剪掉。代码也很简单：
div {背景：深粉色；clip-path:多边形(0 0，100% 0，0 100%，0 0)；}
使用剪辑路径实现三角形
在这个网站- CSS剪辑路径生成器中，您可以快速创建简单的剪辑路径图形，并获得相应的CSS代码。
使用 clip-path 绘制三角形
好了，最后一个，有点独特的，就是用字符来表示三角形。
下面列出了一些三角形字符的十进制Unicode表示代码。
: #9668; : #9658; : #9660; : #9650; : #8895; : #9651;比如我们用# 9660；实现一个三角形，代码如下：
div class= normal # 9660/div div { font-size:100px；颜色：深粉色；}效果还是不错的：
但需要注意的是，用字符表示三角形与当前设置的字体有很强的相关性，不同字体画出的同一个字符是不一样的。我在Google Font上随机选择了几种不同的字体来代表同一个字符，结果如下：
如你所见，不同字体的形状、大小、基线都是不一样的，所以如果你想使用字符三角形，一定要确保用户的浏览器安装了你指定的字体，否则不要使用这种方法。
完整对比演示，可以戳这里：
CodePen Demo-用字符实现三角形。
利用字符绘制三角形
好了，本文到此结束。我希望它能帮助你用CSS绘制三角形的6种不同方法。
获取最有趣的CSS资讯，不要错过我的微信官方账号——iCSS前端趣闻。
更多精彩的CSS技术文章总结在我的Github - iCSS里，不断更新。欢迎订购明星订阅合集。
关于用css实现三角形的老生常谈(各种方法)这篇文章到此为止。关于CSS实现三角形的更多信息，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。