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 湖北

相关推荐

野猪不是猪🐗:把你的学校加黑,加粗,斜体,下划线,描边,内阴影,内发光,投影,外发光,再上渐变色,居中,放大到最大字号,再把简历里其它内容删了,就行了
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务