CSS:实现一个三角形(*****五颗星)
1.border三角形特性
CSS绘制三角形主要用到的是border属性,也就是边框。
平时在给盒子设置边框时,往往都设置很窄,以为边框是由矩形组成的。实际上,border属性是由三角形组成的,
例如:将元素的长宽都设置为0,显示出来的效果是这样的:
<style> div { width: 0; height: 0; border: 100px solid; border-color: orange blue red green; } </style>
<div></div>
所以可根据border这个特性来绘制三角形:
2.实现三角形方法:利用border特性
<style> .div1 { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; } .div2 { width: 0; height: 0;
剩余60%内容,订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理