实现三角形梯形圆-CSDN博客

本文链接：https://blog.csdn.net/n9_333/article/details/129205032

盒子高宽为零

设置边框,其颜色为透明色

确定三角形方向,更改其颜色

其对边为none


.wrap div{
            width: 0;
            height: 0;
            border: 100px solid transparent;
            margin: 10px;
        }
        .wrap div:nth-child(1){
            border-top-color: brown;
            border-bottom: none;
        }
        .wrap div:nth-child(2){
            border-bottom-color: brown;
            border-top: none;
        }
        .wrap div:nth-child(3){
            border-right-color: brown;
            border-left: none;
        }
        .wrap div:nth-child(4){
            border-left-color: brown;
            border-right: none;
        }
      <body>
     <div class="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

实现梯形

盒子高宽相等

设置边框,其颜色为透明色

确定三角形方向,更改其颜色

其对边为none

 div{
            width: 100px;
            height: 100px;
            border: 100px solid transparent;
            margin: 10px;
           

        }
        div:first-child{
              border-top-color: green;
              border-bottom: none;
        }
        body div:nth-child(3){
            border-left-color: yellowgreen;
            border-right:none ;
        }
        
 <body>
    <div></div>
    <div></div>
    <div></div>
</body>

实现圆形

高宽相等,边框圆角为50%

div:first-child{
            width: 200px;
            height: 200px;
            background-color: brown;
            border-radius: 50%;
        }
        
        <body>
    <div></div>
    <div></div>
    <div></div>
</body>

实现上半圆

宽是高的一半其圆角不用百分比

p{
            width: 300px;
            height: 150px;
            border-radius: 300px 300px 0 0;
            background-color: red;
        }
       <body
         p></p>
         </body>