1. 首页首页
  2. 编程基础编程基础

用CSS画实心三角形和空心三角形

编程基础 • • 阅读 5

用CSS画实心三角形和空心三角形1 实心三角形 htmlcss sanjiao border left 10pxsolidtra border bottom 10pxsolidred border right 10pxsolidtra border top 10pxsolidtra width 0 朝右空心三角形

（1）实心三角形

html

<div class='sanjiao'></div>


css

.sanjiao{ border-left: 10px solid transparent; border-bottom: 10px solid red;//向上的三角 border-right: 10px solid transparent; border-top: 10px solid transparent; width: 0px; height: 0px; }

（2）空心三角形

这里画了一个正方形，不设置背景色，设置左边和上边相邻两边的border，再画两个三角形，边长为第一个三角形的对角线长度，通过旋转驾到第一个三角形的斜边上，通过两个矩形组合成一个空心的三角形

.sanjiao{ width: 100px; height: 100px; border-left: 1px solid red; border-top: 1px solid red; position: relative; }

 
.sanjiao:after{ content: ""; position: absolute; left: 29px; top: 29px; width: 141.4px; height: 141.4px; border-left: 1px solid red; transform: rotate(45deg);//通过旋转来改变三角形的朝向 }



今天的文章 用CSS画实心三角形和空心三角形分享到此就结束了，感谢您的阅读。
编程小号
上一篇 2024-12-13 21:17
下一篇 2024-12-13 21:11

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ji-chu/85084.html