用CSS绘制三角形

hover_lew 发布于2019-08-28 18:11 / 2188人阅读

摘要：代码如下代码代码效果如下绘制此时，我们就可以根据上述的内容画出不同朝向的三角形了，例如当我们需要一个朝上的三角形，就不需要设置上边框，其他的以此类推。

引入

用 CSS 绘制三角形，只是对 border 属性的简单应用。平时使用 border 属性的时候多留意一下，就会发现其中的技巧。下面，我们先看以下代码：

HTML代码：

----------
CSS代码：
.test{
    width: 10px;
    height: 10px;
    border-top: 50px solid black;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid orange;
}

效果如下：

不难看出，当盒子内容的宽度和高度远小于边框的时候，边框的显示为等腰梯形。由此我们可以推断，当我们将 div 的宽高都设为 0 的时候，代表盒子内容的白色正方形会消失，于此同时，边框显示为等腰三角形。代码如下：

HTML代码：

----------
CSS代码：
.test{
    width: 0;
    height: 0;
    border-top: 50px solid black;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid orange;
}

效果如下：

绘制

此时，我们就可以根据上述的内容画出不同朝向的三角形了，例如：当我们需要一个朝上的三角形，就不需要设置上边框，其他的以此类推。代码如下：

HTML代码：




----------
CSS代码：
.test1{
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
    border-left: 50px solid transparent;
}
.test2{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid orange;
}
.test3{
    width: 0;
    height: 0;
    border-top: 50px solid black;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}
.test4{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 50px solid red;
    border-bottom: 50px solid transparent;

效果如下：

更进一步

在实现绘制的代码中，我们会注意到，每个三角形都有两个边框的 border-color 属性被设置成 transparent。至于为什么，我们可以改变该属性值来尝试一下，代码如下：

HTML代码：

CSS代码：
.test{
    width: 0;
    height: 0;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid orange;
}

效果如下：

对比完全设置边框和上面少设置一项边框的效果图，可以看出，橙色和红色三角形各自缺少了上面的一半。由此可知，我们必须设置三个边框的，且位于两侧的边框的 border-color 属性应设置为 transparent。

总结

写这篇总结也是看到最近有人提出该方面问题，想起当初自己做的尝试，所以写出来水一篇文章。写的比较简陋，以后有机会再做充实，请多多指导。

关于使用CSS绘制简单图形，推荐学习ICONO:纯CSS图标

云服务器 GPU云服务器三角形绘制 html5三角形绘制 css三角形 css三角

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111073.html

运用clip-path的纯CSS形状变换

摘要：在之前所提到绘制正多边形的方法，算是纯粹利用伪元素来完成，不过坦白说还有另外一种方法，可以将单一做更多形状的变换，这种方法就是的，这个看起来有点眼熟，因为它原本就存在于里头，利用掩码剪裁的方法，连接坐标绘制掩码区域，就可以做出许多不同的在之前所提到绘制正多边形的方法，算是纯粹利用伪元素来完成，不过坦白说还有另外一种方法，可以将单一div做更多形状的变换，这种方法就是CSS3的clip...

wanglu1209 2019-08-29 18:39 评论0 收藏0
【基础】在CSS中绘制三角形及相关应用

摘要：基本原理在中，我们可以利用四个属性来绘制三角形。绘制三角形等边三角形等边三角形又称正三边形，为三边相等的三角形，其三个内角相等，均为，它是锐角三角形的一种。简言本文简要阐述了用CSS边框的方法在页面上绘制三角形，包括几种典型的三角形绘制，还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种，大家根据项目实际，选用最适宜项目的方案。 showImg(https://...

Lycheeee 2019-08-30 15:53 评论0 收藏0
前端每日实战：166# 视频演示如何用 CSS 创作一个 Safari LOGO

摘要：用批量生成刻度线因为刻度线有很多条，为了减少代码量，我们用来批量创建刻度线。同时修改属性和函数，让它们引用这个变量的值。绘制指针指针是由个三角形组成的，对于这种成对的元素，通常都用伪元素绘制。最后，加一点动画效果，让指针像指南针那样转动。 showImg(https://segmentfault.com/img/bVbsTZD?w=400&h=399); 效果预览按下右侧的点击预览按...

Darkgel 2019-08-26 13:49 评论0 收藏0
前端每日实战：166# 视频演示如何用 CSS 创作一个 Safari LOGO

摘要：用批量生成刻度线因为刻度线有很多条，为了减少代码量，我们用来批量创建刻度线。同时修改属性和函数，让它们引用这个变量的值。绘制指针指针是由个三角形组成的，对于这种成对的元素，通常都用伪元素绘制。最后，加一点动画效果，让指针像指南针那样转动。 showImg(https://segmentfault.com/img/bVbsTZD?w=400&h=399); 效果预览按下右侧的点击预览按...

Terry_Tai 2019-08-30 10:55 评论0 收藏0