CSS实现三角形、扇形、半圆以及圆形

最新推荐文章于 2023-06-04 23:22:07 发布

我运气真好！

最新推荐文章于 2023-06-04 23:22:07 发布

阅读量573

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_44260108/article/details/128019994

版权

直接上代码！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Name</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            /**
            *   三角形和扇形的方法基本一致，设置元素本身的长宽为0
            *   再设置元素的border宽度并让它保持不显示颜色
            *   最后再给它的底部border加上颜色，对于扇形还需额外添加border-radius: 50%
            */
            .triangle {
                width: 0;
                height: 0;
                border: 50px solid transparent;
                border-bottom-color: purple; 
            }
            .sector {
                width: 0;
                height: 0;
                border: 50px solid transparent;
                border-radius: 50%;
                border-bottom-color: lightblue;
            }
            /**
            *   对于圆形，只需要设置border-radius: 50%及可
            */
            .circle {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: lightgreen;
            }
            /**
            *   对于半圆，首先设定好需要显示的半区,根据选定的半区设定长宽
            *   上下布局长为x宽为2x；左右布局宽为x长为2x
            *   根据居住设置 border-top/bottom-left/right-radius: x;
            */
            .halfCircle {
                width: 100px;
                height: 50px;
                background-color: pink;
                border-top-left-radius: 50px;
                border-top-right-radius: 50px;
            }
            .halfCircle2 {
                width: 50px;
                height: 100px;
                background-color: brown;
                border-top-left-radius: 50px;
                border-bottom-left-radius: 50px;
            }
        </style>
    </head>
    <body>
        <div class="triangle"></div>
        <div class="sector"></div>
        <div class="circle"></div>
        <div class="halfCircle"></div>
        <div class="halfCircle2"></div>
    </body>
</html>