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

小草莓蹦蹦跳

已于 2023-11-06 14:49:09 修改

阅读量230

点赞数 1

分类专栏： CSS3 每日专栏文章标签： javascript 前端开发语言

于 2023-10-17 14:03:15 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/133878962

版权

每日专栏同时被 2 个专栏收录

226 篇文章 4 订阅

订阅专栏

CSS3

55 篇文章 2 订阅

订阅专栏

结论先行：

① 实现一个三角形：

原理：当一个盒子的宽高都为0时，那么盒子的展现形式是由边框 border 的粗细和颜色决定的。盒子的四个边框组合成为一个正方形的盒子。当一边有颜色，其他都是透明色的时候，就是我们想要的三角形了。

② 实现一个扇形

原理：在实现三角形的逻辑基础上，加上 border-radius: 100% 即可。

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

利用vw来实现：例如宽度设置为10%，高度设置为10vw

利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现：例如宽度设置为10%，height 为0，padding-top 也设置为10%

利用伪元素的 margin-top 的值来实现：例如元素 width 设置为10%，overflow 设置为 hidden，伪元素的 margin-top 设置为100%

具体分析：

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

1、实现一个三角形

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

2、实现一个扇形

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

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

<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来实现

<head>
    <style>
        .square {
            width: 10%;
            height: 10vw;
            background: tomato;
        }   
    </style>
</head>
<body>
    <div class="square"></div>
</body>

② 利用元素的 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%;
        }

小草莓蹦蹦跳

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实现一个三角形、扇形、宽高自适应的正方形

当一个盒子的宽高都为0时，那么盒子的展现形式是由边框 border 的粗细和颜色决定的。：例如元素 width 设置为10%，overflow 设置为 hidden，伪元素的 margin-top 设置为100%利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现。：例如宽度设置为10%，height 为0，padding-top 也设置为10%利用伪元素的 margin-top 的值来实现。：例如宽度设置为10%，高度设置为10vw。在实现三角形的逻辑基础上，加上。
复制链接

扫一扫