使用CSS实现椭圆，三角形，五角星等图形

1.椭圆
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

border-radius: 2em 1em 4em / 0.5em 3em;

等价于：

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

        #ellipse {
            width: 200px;
            height: 100px;
            background: red;
            color: #fff;
            text-align: center;
            border-radius: 100px/50px;
            /*-webkit-border-radius: 100px/50px;
            -moz-border-radius: 100px/50px;*/
        }

2.上三角形

        #triangle-up {
            width: 0;
            height: 0;
            color: white;
            text-align: center;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
        }

3.下三角形

        #triangle-down {
            width: 0;
            height: 0;
            color: white;
            text-align: center;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid red;
        }

4.左三角形

        #triangle-left {
            width: 0;
            height: 0;
            color: white;
            text-align: center;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-right: 100px solid red;
        }

5.右三角形

        #triangle-right {
            width: 0;
            height: 0;
            color: white;
            text-align: center;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 100px solid red;
        }

6.左上角是直角的直角三角形

        #triangle-topleft {
            width: 0;