第 16 题：如何通过 CSS 绘制一个三角形？

虽然网上有很多关于绘制三角形的代码，但是我相信还是有一部分人是不知道如何实现的。我下面举个栗子。

这种情况应该都能理解，不就是设置一个边框嘛

width: 100px;
height: 100px;
border: 20px solid;
border-color: #000;
box-sizing: border-box;

第二步，把边框颜色改一下，应该也能看懂

width: 100px;
height: 100px;
border: 20px solid;
border-color: green blue red orange;
box-sizing: border-box;

第三步，把边框放大，使得里面的白色区域减少到没有为止

width: 100px;
height: 100px;
border: 50px solid;
border-color: green blue red orange;
box-sizing: border-box;

第四步，把其他边框颜色改为透明色试试

width: 100px;
height: 100px;
border: 50px solid;
border-color: green transparent transparent transparent;
box-sizing: border-box;

就是这么简单，通过 border-color 控制三角形方向，通过 width、height、border 宽度来调整三角形大小和形状

文章的内容/灵感都从下方内容中借鉴

posted @ 2021-08-10 09:16  Noxus丶SJ  阅读(146)  评论(0)  编辑  收藏  举报