CSS基本图形总结

最新推荐文章于 2025-11-29 11:13:27 发布

原创最新推荐文章于 2025-11-29 11:13:27 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文总结了CSS用于创建基本图形的各种技巧，包括使用border-radius、伪元素、linear-gradient和clip-path等属性来构建圆形、正方形、三角形和其他复杂形状。通过实例解析，深入理解CSS在图形设计中的应用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /*
        css 三角形

        1.width: 0;height: 0;

        2.border: 100px solid transparent;

        3.分别设置上、右、下、左四个border

    */
    span{display: block; width: 0;height: 0;border: 100px solid transparent;}   

    span
    {
        border-top-width: 100px;
        border-top-style: solid;
        border-top-color:pink;
    }

    /*
        css 圆形

        通过属性border-radius可以制作圆形，半圆和椭圆和一些特殊的图形

    */

    /*圆：宽高相等，border-radius值为宽高的一半*/
    div{width: 200px;height: 200px;border: 1px solid blue;border-radius: 100px;}


    /*上半圆：宽为高的两倍，左上角和右上角的圆角半径值和高度相等，左下角和右下角的圆角半径值为0*/
    div{width: 200px;height: 100px;border: 1px solid blue;border-radius: 100px 100px 0 0;}


    /*下半圆：宽为高的两倍，左下角和右下角的圆角半径值和高度相等，左上角和右上角的圆角半径值为0*/
    div{width: 200px;height: 100px;border: 1px solid blue;border-radius: 0 0 100px 100px ;}


    /*左半圆：高为宽的两倍，左下角和左下角的圆角半径值和宽度相等，右上角和右下角的圆角半径值为0*/
    div{width: 100px;height: 200px;border: 1px solid blue;border-radius: 100px 0 0 100px ;}


    /* 右半圆：高为宽的两倍，右上角和右下角的圆角半径值和宽度相等，左下角和左下角的圆角半径值为0*/
    div{width: 100px;height: 200px;border: 1px solid blue;border-radius: 0  100px 100px 0 ;}


    /*椭圆：宽高不相等，四个角的圆角水平半径定义为宽度的一半，垂直半径定义为高度的一半*/
    div{width: 200px;height: 100px;border: 1px solid blue;border-radius:100px/50px;}


    /*橄榄球：宽高相等，左上角和右下角的圆角半径值和宽高相等，右上角和左下角的圆角半径值为0*/
    div{width: 100px;height: 100px;border: 1px solid blue;border-radius: 100px 0;}

    /*四叶草*/
    div{width: 100px;height: 100px;border: 1px solid blue;border-radius: 0 100px;}
    /*div div{width: 100px;height: 100px;border: 1px solid blue;border-radius: 100px 0;}*/

    /*树叶*/
    div{width: 200px;height: 100px;border: 1px solid blue;border-radius: 100px 0;}

    </style>
</head>
<body>


    <span></span>
    <div>
        <div></div>
    </div>

</body>
</html>