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

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%;
        }  
相关推荐
繁缕怀夕8 分钟前
【QT笔记---QText】
开发语言·笔记·qt
byxdaz9 分钟前
Qt5中视口(ViewPort)与窗口(Window)
开发语言·qt
招风的黑耳18 分钟前
Web元件库 ElementUI元件库+后台模板页面(支持Axure9、10、11)
前端·elementui·axure
雯0609~19 分钟前
CSS:使用内边距时,解决宽随之改变问题
前端·css
Dolphin_海豚30 分钟前
10 分钟带你入坑 electron
前端·javascript·electron
jyan_敬言30 分钟前
【C++】入门基础(二)引用、const引用、内联函数inline、nullptr
c语言·开发语言·数据结构·c++·青少年编程·编辑器
UpUpUp……31 分钟前
模拟String基本函数/深浅拷贝/柔性数组
开发语言·c++·算法
奥顺互联V32 分钟前
如何处理PHP中的编码问题
android·开发语言·php
乐闻x39 分钟前
性能优化:javascript 如何检测并处理页面卡顿
前端·javascript·性能优化
雯0609~1 小时前
vue3:八、登录界面实现-忘记密码
前端·javascript·vue.js