本篇文章为大家展示了CSS如何制作出一个三角形，代码简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
首先我们新建一个100x100的正方形div，为了方便我们查看，设置一个背景颜色。
css代码如下：
width: 100px; height: 100px; background-color: #333;
接着给这个div添加两个border，
width: 100px; height: 100px; background-color: #333; border-left:50px solid red; border-bottom: 50px solid blue;
效果图如下：
是不是感觉很神奇，为什么会这样呢？在上面我们分别为这个div添加了50像素的左边框和下边框，在div左下角浏览器智能的将这两种颜色平分了，上面是左边边框的红色，下面是下面边框的蓝色。看到这里你可能疑惑了，不是要实现一个三角形吗？怎么让我设置边框呢？别着急，我们接着再添加上面和右面两个边框。
width: 100px; height: 100px; background-color: #333; border-left:50px solid red; border-bottom: 50px solid blue; border-right:50px solid green; border-top:50px solid yellow;
效果：
到这里你是不是已经明白了，我们接着把这个div的宽高设为0px，再看效果
哈哈，出来了四个三角形，你想要哪个，只需要把其他三个的边框颜色设为透明就可以了。比如我想要下面的蓝色的三角形，css代码如下：
width: 0px; height: 0px; border-left:50px solid transparent; border-bottom: 50px solid blue; border-right:50px solid transparent; border-top:50px solid transparent;
最终我们想要的三角形就出来了。
上述内容就是CSS如何制作出一个三角形，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
