CSS实现各种形状示例-CSDN博客

本文链接：https://blog.csdn.net/shanshan326/article/details/84903476

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3实现各种形状</title>
    <style type="text/css">
        div{
            display:inline-block;
        }
        #circle{
            height: 120px;
            width: 120px;
            background-color: chocolate;
            -moz-border-radius: 60px;
            -webkit-border-radius: 60px;
            border-radius: 60px;
        }

        #oval{
            /*椭圆形*/
            width: 200px;
            height: 100px;
            background-color: cornflowerblue;

            /*两种设置方式   / 号之前的数字代表水平半径   之后的数字代表垂直半径*/
            /*-moz-border-radius: 100px/50px;*/
            /*-webkit-border-radius: 100px/50px;*/
            /*border-radius: 100px/50px;*/

            /*代表圆的半径 纵向横向都是50%*/
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }

        #triangle-orign{
            /*三角形原理*/
            width: 100px;
            height: 100px;
            background-color: black;
            border-top: 140px solid #113322;
            border-left: 140px solid #4400ff;
            border-right: 140px solid crimson ;
            border-bottom: 140px solid lightseagreen;
        }


        #triangle{
            /*三角形*/
            width: 0;
            height: 0;
            border-bottom: 140px solid #8855ff;
            border-left:70px solid transparent;
            border-right: 70px solid transparent;
        }

        #triangle-down{
            /*朝下的三角形*/
            width: 0;
            height: 0;
            border-top: 140px solid blue;
            border-left: 70px solid transparent;
            border-right: 70px solid transparent;
        }

        #triangle-left{
            width: 0px;
            height: 0px;
            border-left: 140px solid coral;
            border-top: 70px solid transparent;
            border-bottom: 70px solid transparent;
        }

        #triangle-right{
            width: 0px;
            height: 0px;
            border-right: 140px solid magenta;
            border-top: 70px solid transparent;
            border-bottom: 70px solid transparent;
        }
    </style>
</head>
<body>
    <div id="shapes">
        <!--圆形-->
        <div id="circle"></div>

        <!--椭圆-->
        <div id="oval"></div>

        <!--三角形原型-->
        <div id="triangle-orign"></div>

        <!--三角形-->
        <div id="triangle"></div>

        <div id="triangle-down"></div>

        <div id="triangle-left"></div>

        <div id="triangle-right"></div>

    </div>
</body>
</html>