实现一个三角形、扇形、宽高自适应的正方形

2. 实现一个扇形 · 超级学习资料 · 看云

1、实现一个三角形

用CSS绘制一个三角形-CSDN博客

2、实现一个扇形

在实现三角形的逻辑基础上,加上 border-radius 即可。

html 复制代码
<head>
    <style>
        .sector {
            width: 0;
            height: 0;
            border-top: 60px solid red;
            border-right: 60px solid yellow;
            border-bottom: 60px solid blue;
            border-left: 60px solid green;
            border-radius: 60px;
        }   
    </style>
</head>
<body>
    <div class="sector"></div>
</body>
html 复制代码
<head>
    <style>
        .sector {
            width: 0;
            height: 0;
            border-top: 60px solid transparent;
            border-right: 60px solid transparent;
            border-bottom: 60px solid transparent;
            border-left: 60px solid green;
            border-radius: 60px;
        }  
    </style>
</head>
<body>
    <div class="sector"></div>
</body>

3、实现一个宽高自适应的正方形

① 利用vw来实现
html 复制代码
<head>
    <style>
        .square {
            width: 10%;
            height: 10vw;
            background: tomato;
        }   
    </style>
</head>
<body>
    <div class="square"></div>
</body>
② 利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现
css 复制代码
        .square {
            width: 20%;
            height: 0;
            padding-top: 20%;
            background: tomato;
        } 
③ 利用子元素的 margin-top 的值来实现
css 复制代码
        .square {
            width: 30%;
            overflow: hidden;
            background: tomato;
        }
        .square::after {
            content: '';
            display: block;
            margin-top: 100%;
        }  
相关推荐
敖云岚19 分钟前
【云原生技术】容器技术的发展史
开发语言·云原生·perl
Anlici24 分钟前
跨域解决方案还有优劣!?
前端·面试
苹果电脑的鑫鑫26 分钟前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
庸俗今天不摸鱼30 分钟前
【万字总结】构建现代Web应用的全方位性能优化体系学习指南(二)
前端·性能优化·webp
忧郁的蛋~35 分钟前
JavaScript性能优化的12种方式
开发语言·javascript·性能优化
人工智能研究所37 分钟前
使用OpenCV与Python编写自己的俄罗斯方块小游戏
开发语言·python·opencv
DDD小小小宇宙37 分钟前
python列表基础知识
开发语言·windows·python
海盗强39 分钟前
prototype和proto的区别
开发语言·javascript·原型模式
潜龙在渊灬44 分钟前
杂谈:前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
追寻光1 小时前
Java 绘制图形验证码
java·前端