（1）/普通箭頭/         #normalarrow{position: relative;             width: 0;             height: 0;             border-top: 9px solid transparent;             border-right: 9px solid red;             -webkit-transform: rotate(10deg);             -moz-transform: rotate(10deg);             -ms-transform: rotate(10deg);             -o-transform: rotate(10deg);             }         #normalarrow:after {             content: “”;             position: absolute;             border: 0 solid transparent;             border-top: 3px solid red;             top: -12px;             left: -9px;             width: 12px;             height: 12px;             -webkit-transform: rotate(45deg);             -moz-transform: rotate(45deg);             -ms-transform: rotate(45deg);             -o-transform: rotate(45deg);         }                   （2）  /右旋轉箭頭

/         #curvedarrow {             position: relative;             width: 0;             height: 0;             border-top: 9px solid transparent;             border-right: 9px solid red;             -webkit-transform: rotate(10deg);             -moz-transform: rotate(10deg);             -ms-transform: rotate(10deg);             -o-transform: rotate(10deg);         }         #curvedarrow:after {             content: “”;             position: absolute;             border: 0 solid transparent;             border-top: 3px solid red;             border-radius: 20px 0 0 0;             top: -12px;             left: -9px;             width: 12px;             height: 12px;             -webkit-transform: rotate(45deg);             -moz-transform: rotate(45deg);             -ms-transform: rotate(45deg);             -o-transform: rotate(45deg);         }          4、梯形         #trapezoid {             border-bottom: 100px solid red;             border-left: 50px solid transparent;             border-right: 50px solid transparent;             height: 0;             width: 100px;         }          5、平行四邊形             #parallelogram {             width: 150px;             height: 100px;             -webkit-transform: skew(20deg);             -moz-transform: skew(20deg);             -o-transform: skew(20deg);             /旋轉角度

/             background: red;         }                  /六角星/                 #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: 100px solid deepskyblue;             position: absolute;             content: “”;             top: 30px;             left: -50px;         }          6、五角星         #star-five {             margin: 50px 0;             position: relative;             color: red;             width: 0px;             height: 0px;             border-right: 100px solid transparent;             border-bottom: 70px solid red;             border-left: 100px solid transparent;             -moz-transform: rotate(35deg);             -webkit-transform: rotate(35deg);             -ms-transform: rotate(35deg);             -o-transform: rotate(35deg);         }                  #star-five:before {             border-bottom: 80px solid greenyellow;             border-left: 30px solid transparent;             border-right: 30px solid transparent;             position: absolute;             height: 0;             width: 0;             top: -45px;             left: -65px;             display: block;             content: ‘’;             -webkit-transform: rotate(-35deg);             -moz-transform: rotate(-35deg);             -ms-transform: rotate(-35deg);             -o-transform: rotate(-35deg);         }                  #star-five:after {             position: absolute;             display: block;             color: red;             top: 3px;             left: -105px;             width: 0px;             height: 0px;             border-right: 100px solid transparent;             border-bottom: 70px solid deepskyblue;             border-left: 100px solid transparent;             -webkit-transform: rotate(-70deg);             -moz-transform: rotate(-70deg);             -ms-transform: rotate(-70deg);             -o-transform: rotate(-70deg);             content: ‘’;         }          7、正五邊形         #pentagon {             position: relative;             width: 54px;             border-width: 50px 18px 0;             border-style: solid;             border-color: red transparent;         }                  #pentagon:before {             content: “”;             position: absolute;             height: 0;             width: 0;             top: -85px;             left: -18px;             border-width: 0 45px 35px;             border-style: solid;             border-color: transparent transparent deepskyblue;         }          8、正六邊形         #hexagon {             width: 100px;             height: 55px;             background: red;             position: relative;         }                  #hexagon:before {             content: “”;             position: absolute;             top: -25px;             left: 0;             width: 0;             height: 0;             border-left: 50px solid transparent;             border-right: 50px solid transparent;             border-bottom: 25px solid deepskyblue;         }                  #hexagon:after {             content: “”;             position: absolute;             bottom: -25px;             left: 0;             width: 0;             height: 0;             border-left: 50px solid transparent;             border-right: 50px solid transparent;             border-top: 25px solid green;         }          9、正八邊形         #octagon {             width: 100px;             height: 100px;             background: red;             position: relative;         }                  #octagon:before {             content: “”;             position: absolute;             top: 0;             left: 0;             border-bottom: 29px solid red;             border-left: 29px solid #eee;             border-right: 29px solid #eee;             width: 42px;             height: 0;         }                  #octagon:after {             content: “”;             position: absolute;             bottom: 0;             left: 0;             border-top: 29px solid red;             border-left: 29px solid #eee;             border-right: 29px solid #eee;             width: 42px;             height: 0;         }          10、心形         #heart {             position: relative;             width: 100px;             height: 90px;         }                  #heart:before,         #heart:after {             position: absolute;             content: “”;             left: 50px;             top: 0;             width: 50px;             height: 80px;             background: red;             -moz-border-radius: 50px 50px 0 0;             border-radius: 50px 50px 0 0;             -webkit-transform: rotate(-45deg);             -moz-transform: rotate(-45deg);             -ms-transform: rotate(-45deg);             -o-transform: rotate(-45deg);             transform: rotate(-45deg);             -webkit-transform-origin: 0 100%;             -moz-transform-origin: 0 100%;             -ms-transform-origin: 0 100%;             -o-transform-origin: 0 100%;             transform-origin: 0 100%;         }                  #heart:after {             left: 0;             background: greenyellow;             -webkit-transform: rotate(45deg);             -moz-transform: rotate(45deg);             -ms-transform: rotate(45deg);             -o-transform: rotate(45deg);             transform: rotate(45deg);             -webkit-transform-origin: 100% 100%;             -moz-transform-origin: 100% 100%;             -ms-transform-origin: 100% 100%;             -o-transform-origin: 100% 100%;             transform-origin: 100% 100%;         }          111、無窮符號         #infinity {             position: relative;             width: 212px;             height: 100px;         }                  #infinity:before,         #infinity:after {             content: “”;             position: absolute;             top: 0;             left: 0;             width: 60px;             height: 60px;             border: 20px solid red;             -moz-border-radius: 50px 50px 0 50px;             border-radius: 50px 50px 0 50px;             -webkit-transform: rotate(-45deg);             -moz-transform: rotate(-45deg);             -ms-transform: rotate(-45deg);             -o-transform: rotate(-45deg);             transform: rotate(-45deg);         }                  #infinity:after {             left: auto;             right: 0;             -moz-border-radius: 50px 50px 50px 0;             border-radius: 50px 50px 50px 0;             -webkit-transform: rotate(45deg);             -moz-transform: rotate(45deg);             -ms-transform: rotate(45deg);             -o-transform: rotate(45deg);             transform: rotate(45deg);         }          12、稜形         #diamond {             width: 0;             height: 0;             border: 50px solid transparent;             border-bottom-color: red;             position: relative;             top: -50px;         }                  #diamond:after {             content: ‘’;             position: absolute;             left: -50px;             top: 50px;             width: 0;             height: 0;             border: 50px solid transparent;             border-top-color: red;         }          13、盾牌                #diamond-shield {             width: 0;             height: 0;             border: 50px solid transparent;             border-bottom: 20px solid red;             position: relative;             top: -50px;         }                  #diamond-shield:after {             content: ‘’;             position: absolute;             left: -50px;             top: 20px;             width: 0;             height: 0;             border: 50px solid transparent;             border-top: 70px solid red;         } 14、雞蛋形狀                  #egg {                      width: 126px;             height: 180px;             background-color: red;             -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;             border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;         } 15、吃豆人                  #pacman {             width: 0px;             height: 0px;             border-right: 60px solid transparent;             border-top: 60px solid red;             border-left: 60px solid red;             border-bottom: 60px solid red;             border-top-left-radius: 60px;             border-top-right-radius: 60px;             border-bottom-left-radius: 60px;             border-bottom-right-radius: 60px;         } 16、對話方塊                  #talkbubble {             width: 120px;             height: 80px;             background: red;             position: relative;             -moz-border-radius: 10px;             -webkit-border-radius: 10px;             border-radius: 10px;         }                  #talkbubble:before {             content: “”;             position: absolute;             right: 100%;             top: 26px;             width: 0;             height: 0;             border-top: 13px solid transparent;             border-right: 26px solid red;             border-bottom: 13px solid transparent;         } 17、十二星星                  #burst-12 {             background: red;             width: 80px;             height: 80px;             position: relative;             text-align: center;         }                  #burst-12:before,         #burst-12:after {             content: “”;             position: absolute;             top: 0;             left: 0;             height: 80px;             width: 80px;             background: red;         }                  #burst-12:before {             -webkit-transform: rotate(30deg);             -moz-transform: rotate(30deg);             -ms-transform: rotate(30deg);             -o-transform: rotate(30deg);         }                  #burst-12:after {             -webkit-transform: rotate(60deg);             -moz-transform: rotate(60deg);             -ms-transform: rotate(60deg);             -o-transform: rotate(60deg);         } 18、八星星                  #burst-8 {             background: red;             width: 80px;             height: 80px;             position: relative;             text-align: center;             -webkit-transform: rotate(20deg);             -moz-transform: rotate(20deg);             -ms-transform: rotate(20deg);             -o-transform: rotate(20eg);         }                  #burst-8:before {             content: “”;             position: absolute;             top: 0;             left: 0;             height: 80px;             width: 80px;             background: red;             -webkit-transform: rotate(135deg);             -moz-transform: rotate(135deg);             -ms-transform: rotate(135deg);             -o-transform: rotate(135deg);         } 19、陰陽                  #yin-yang {             width: 96px;             height: 48px;             background: #eee;             border-color: red;             border-style: solid;             border-width: 2px 2px 50px 2px;             border-radius: 100%;             position: relative;         }                  #yin-yang:before {             content: “”;             position: absolute;             top: 50%;             left: 0;             background: #eee;             border: 18px solid red;             border-radius: 100%;             width: 12px;             height: 12px;         }                  #yin-yang:after {             content: “”;             position: absolute;             top: 50%;             left: 50%;             background: red;             border: 18px solid #eee;             border-radius: 100%;             width: 12px;             height: 12px;         } 20、電視螢幕                  #tv {             position: relative;             width: 200px;             height: 150px;             margin: 20px 0;             background: red;             border-radius: 50% / 10%;             color: white;             text-align: center;             text-indent: .1em;         }                  #tv:before {             content: ‘’;             position: absolute;             top: 10%;             bottom: 10%;             right: -5%;             left: -5%;             background: #eee;             border-radius: 5% / 50%;         } 21、放大鏡                  #magnifying-glass {             font-size: 10em;             /* This controls the size. */             display: inline-block;             width: 0.4em;             height: 0.4em;             border: 0.1em solid red;             position: relative;             border-radius: 0.35em;         }                  #magnifying-glass::before {             content: “”;             display: inline-block;             position: absolute;             right: -0.25em;             bottom: -0.1em;             border-width: 0;             background: red;             width: 0.35em;             height: 0.08em;             -webkit-transform: rotate(45deg);             -moz-transform: rotate(45deg);             -ms-transform: rotate(45deg);             -o-transform: rotate(45deg);         }          22、月亮形狀               #moon {             width: 80px;             height: 80px;             border-radius: 50%;             box-shadow: 15px 15px 0 0 red;         }          23、錐         #cone {             width: 0;             height: 0;             border-left: 70px solid transparent;             border-right: 70px solid transparent;             border-top: 100px solid red;             -moz-border-radius: 50%;             -webkit-border-radius: 50%;             border-radius: 50%;         } 24、加號                  #cross {             background: red;             height: 100px;             position: relative;             width: 20px;         }                  #cross:after {             background: red;             content: “”;             height: 20px;             left: -40px;             position: absolute;             top: 40px;             width: 100px;         }