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%内容,订阅专栏后可继续查看/也可单篇购买

前端面试题 文章被收录于专栏

前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理

全部评论
方法收藏了
点赞 回复 分享
发布于 2023-03-28 22:06 湖北

相关推荐

点赞 收藏 评论
分享
牛客网
牛客企业服务