纯css画出的图形——html5

复制下面代码，保存为.html格式

[html]
<html>
<head>
</head>
<style type="text/css">
    #square
    {
        width: 100px;
        height: 100px;
        background: red;
    }
    #rectangle
    {
        width: 200px;
        height: 100px;
        background: red;
    }
    #circle
    {
        width: 100px;
        height: 100px;
        background: red;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }
    #oval
    {
        width: 200px;
        height: 100px;
        background: red;
        -moz-border-radius: 100px/50px;
        -webkit-border-radius: 100px/50px;
        border-radius: 100px/50px;
    }
    #易做图-up
    {
        width: 0px;
        height: 0px;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }
    #易做图-down
    {
        width: 0px;
        height: 0px;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }
    #易做图-left
    {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-right: 100px solid red;
    }
    #易做图-right
    {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 100px solid red;
    }
    #易做图-topleft
    {
        width: 0px;
        height: 0px;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }
    #易做图-topright
    {
        width: 0px;
        height: 0px;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
    }
    #易做图-leftbottom
    {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }
    #易做图-rightbottom
    {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }
    #parallelogram
    {
        width: 150px;
        height: 100px;
        margin-left: 20px;
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
    }
    #trapezoid
    {
        border-bottom: 100px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        height: 0;
        width: 100px;
    }
    #star-six
    {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
        position: relative;
    }
    #star-six:after
    {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100x solid red;
        position: absolute;
  &

补充：web前端 , HTML 5 ,