CSS实现三角形的原理：

• 将一个元素的width和height定义为0，然后为它设置较粗的边框，并且将其中任意三条 边框或两条边的颜色定义为transparent。

    #box
    {
        border-width: 20px;
        border-style: solid;
        border-color: red transparent transparent transparent
    }

   注意：带边框的三角形就是用两个三角形制作出来的。

CSS实现圆的原理：

• 在CSS中，对于圆角效果我们都是使用CSS3的border-radius属性来实现。

border-radius属性值的四种写法

• 一个值：四个角
• 两个值：左上角和右下角圆角半径
• 三个值：左上角、左下角和右上角
• 四个值：顺时针

🌰:

    div
    ｛
        width:50px;
        line-height: 50px;
        border-radius: 80% 90% 100% 20%;
        background-color: #E61588;
        font-size: 30px;
        text-align: center;
        color: white
        }

CSS实现椭圆的原理：

• 元素的宽和高度不想等，其中四个角的圆角水平半径定义为宽度的一半，垂直半径定义为高度的一半。