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

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

 

1、实现一个三角形

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

2、实现一个扇形

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

 

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

 

① 利用vw来实现

 ② 利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现

        .square {
            width: 20%;
            height: 0;
            padding-top: 20%;
            background: tomato;
        } 

③ 利用子元素的 margin-top 的值来实现 

        .square {
            width: 30%;
            overflow: hidden;
            background: tomato;
        }
        .square::after {
            content: '';
            display: block;
            margin-top: 100%;
        }