第16题:如何通过CSS绘制一个三角形?

188 阅读1分钟

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

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

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

v2-49c2f4e143b04f312878b580b69dcaa8_720w

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

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

v2-64163fe13b047d6907641a17c9718918_720w

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

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

v2-2d3de3d643521cdca4b26a73c8098f46_720w

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

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

v2-edad3ca7e43928eed6c4bd44fe7a988e_720w

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