欢迎光临
我的个人博客网站

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » 第 16 题:如何通过 CSS 绘制一个三角形?
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏