圆角border-radius （实现圆（椭圆胶囊半椭圆）和三角形）以及源码分析

<阿睿>

已于 2022-06-20 20:10:07 修改

阅读量1.7k

点赞数 4

分类专栏：前端文章标签： html css linq

于 2022-06-16 10:45:11 首次发布

本文链接：https://blog.csdn.net/qq_45288176/article/details/125309538

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用CSS3创建各种图形，包括不同类型的圆、三角形、椭圆以及特殊形状如半椭圆、1/4椭圆和扇形。通过实例分析和源码解释，展示了如何利用`border-radius`属性实现这些图形，并提供了多种实现同一图形的不同方法。文章还探讨了如何创建上下部分形状不同的组合图形。

摘要由CSDN通过智能技术生成

一：实现各种圆

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           .box1{
               width:100px;
               height:100px;
               background-color: blue;
               border-radius: 7px;
               border-top-left-radius:20px;/* 单独设置值 */
               }
           .box2{
               width:100px;
               height:100px;
               background-color: blue;
               border-radius: 50%;
           }
           .box3{
               width:200px;
               height:100px;
               background-color: red;
               /* border-radius: 50% 50%; */
               border-radius: 50%;
           }
           .box4{
               width:200px;
               height:100px;
               background-color: blue;
               border-radius: 100px;
           }
           .box {
                width: 500px;
                height: 100px;
                background: #FFD900;
                border-radius: 50% /100% 100% 0 0;;
           }
       </style>
   </head>
   <body>
       
       <div class="box1"></div>

       
       <div class="box2"></div>

       
       <div class="box3"></div>

       
       <div class="box4"></div>

        
       <div class="box"></div>
   </body>
</html>

二实现三角形

.trangle{

　　width: 100px;

　　height: 100px;

　　border: 100px solid #000;

　　border-top-color: red;

　　border-bottom-color: yellow;

　　border-left-color: blue;

　　border-right-color: green;

}

<div class="trangle"></div>

三：椭圆半椭圆 1/4 椭圆扇形

             .a{
               width: 300px;
                height: 100px;
                background-color: yellow;
                border-radius: 50% / 100% 100% 0 0;
           }
           .b{
               width: 300px;
               height: 100px;
               background-color: black;
                border-radius: 50% / 0 0 100% 100%;
           }

横轴分开的椭圆

border-radius:border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

竖轴分开的椭圆

.a{
               width: 300px;
                height: 100px;
                background-color: yellow;
                border-radius: 100% 0 0 100% / 50%;
           }
           .b{
               width: 300px;
               height: 100px;
               background-color: black;
                border-radius: 0 100% 100% 0 / 50%;;
           }

扇形（1/4圆）

   .a{
               width: 100px;
                height: 100px;
                background-color: yellow;
                border-radius: 50%;
           }
           .a {
              width: 0;
              height: 0;
              border-width: 100px;
              border-style: solid;
              border-color: blue transparent #f00 transparent;
              border-radius: 50%;
           }

           .b{
               width: 100px;
               height: 100px;
               background-color: blue;
                border-radius: 100% 0 0 0;

           }

四：特殊图形（实例分析）

背后红色背景怎么设置？上半部分为矩形下半部分为下半椭圆形

法一：

.a{
               width: 200px;
               height: 150px;
               background-color: red;
               /* border-radius: 0 0 50px 50px; */
               border-radius: 380%/ 0 0 100% 100%;
           }

法二：

.a{
               width: 300px;
                height: 100px;
                background-color: yellow;
                border-radius: 100% 100% 0 0/ 50%;
           }
           .b{
               width: 300px;
               height: 100px;
               background-color: black;
                border-radius: 0 0 100% 100%/ 50%;
           }