美文网首页
CSS实现椭圆

CSS实现椭圆

作者: 再见噜噜班 | 来源:发表于2020-02-13 16:19 被阅读0次

    背景知识:border-radius
    对于border-radius,有一个鲜为人知的知识点:它可以单独指定水平和垂直半径,只要用一个斜杠(/)分隔开就可以。实现椭圆就要用到这一点。

    1. 全椭圆
      以椭圆左上角为例,可以得到以下分析:
    椭圆左上角分析.png
    举一反三,其他三个角的水平半径和垂直半径都是高度或者宽度的50%。转换为css代码,即border-radius:50% 50% 50% 50% / 50% 50% 50% 50%(顺序:左上角,右上角,右下角,左下角,顺时针方向),简写border-radius:50% / 50%,再简写border-radius:50%
    2.半椭圆
    以椭圆的上半个椭圆的左上角为例,可以得到以下分析: 半椭圆左上角分析.png
    同样的方法,可以知道四个角的水平和垂直半径分别为50%/100%,50%/100%,0/0,0/0,即border-radius:50% 50% 0 0 /100% 100% 0 0

    四分之一椭圆也可以用同样的方法来实现,就不再赘述,以下贴上全部代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>椭圆</title>
        <style>
            div{
                margin:50px;
            }
            .ovals{
                width:200px;
                height: 100px;
                border-radius: 50%;
                background: lightcoral;
            }
            .half-top-ovals{
                width:200px;
                height: 100px;
                background: lightcoral;
                border-radius: 50% 50% 0 0 / 100% 100% 0 0 ;
            }
            .half-left-ovals{
                width:200px;
                height: 100px;
                background: lightcoral;
                border-radius: 100% 0 0 100% / 50% 0 0 50%;
            }
            .quarter-top-left-ovals{
                width:200px;
                height: 100px;
                background: lightcoral;
                border-radius: 100% 0 0 0/ 100% 0 0 0;
            }
        </style>
    </head>
    <body>
        <div class="ovals"></div>
        <div class='half-top-ovals'></div>
        <div class='half-left-ovals'></div>
        <div class='quarter-top-left-ovals'></div>
    </body>
    </html>
    
    

    效果:


    所有效果.jpg

    相关文章

      网友评论

          本文标题:CSS实现椭圆

          本文链接:https://www.haomeiwen.com/subject/ydqlfhtx.html