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

小草莓蹦蹦跳2023-10-17 14:44

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%;
        }