<html> <head> <title>shape</title> <style type="text/css"> .parent{ position:relative;width:100px;height:100px; } .rect{ width: 100px; height: 100px; background: red; line-height: 100px; text-align: center; color: white; } .circle{ width: 100px; height: 100px; background: red; line-height: 100px; text-align: center; color: white; border-radius: 50%; } .ellipse{ width: 100px; height: 50px; background: red; line-height: 50px; text-align: center; color: white; border-radius: 50%; } .semi-circle{ width: 100px; height: 50px; background: red; line-height: 50px; text-align: center; color: white; border-radius: 200px 200px 0 0; } .sector{ width: 100px; height: 100px; background: red; line-height: 100px; text-align: center; color: white; border-radius: 200px 0 0 0; } .arc{ width: 100px; height: 100px; background: red; line-height: 100px; text-align: center; color: white; border-radius: 100px 0 100px 0; } .triangle{ width: 0px; height: 0px; border-width: 100px; border-style: solid; border-top-color: black; border-bottom-color: green; border-left-color: yellow; border-right-color: gray; } .arrow{ width: 0px; height: 0px; border-width: 100px; border-style: solid; border-top-color: black; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; } .triangle2{ width: 50px; height: 50px; border-width: 50px; border-style: solid; border-top-color: black; border-bottom-color: green; border-left-color: transparent; border-right-color: transparent; } .triangle3{ width: 100px; height: 100px; border-width: 10px; border-style: solid; border-top-color: black; border-bottom-color: green; border-left-color: transparent; border-right-color: transparent; border-radius: 50%; } .triangle4{ width: 50px; height: 50px; border-width: 10px; border-style: solid; border-top-color: black; border-bottom-color: green; border-left-color: red; border-right-color: transparent; border-radius: 50%; clip: rect(0 50px 70px 0); left: 0; top: 0; position: absolute; } .triangle5{ width: 100px; height: 100px; border-top: 10px solid black; border-radius: 100px; } </style> </head> <body> <!-- square --> <div class=‘rect‘>正方形</div> <xmp> div{ width: 100px; height: 100px; background: red; line-height: 100px; text-align: center; color: white; } </xmp> <!-- circle --> <div class=‘circle‘>圆形</div> <xmp> .circle{ width: 100px; height: 100px; background: red; line-height: 100px; text-align: center; color: white; border-radius: 50%; } </xmp> <!-- ellipse --> <div class=‘ellipse‘>椭圆</div> <xmp> .ellipse{ width: 100px; height: 50px; background: red; line-height: 50px; text-align: center; color: white; border-radius: 50%; } </xmp> <!-- semi circle --> <div class=‘semi-circle‘>半圆</div> <xmp> .semi-circle{ width: 100px; height: 50px; background: red; line-height: 50px; text-align: center; color: white; border-radius: 100px 100px 0 0; } </xmp> <!-- sector --> <div class=‘sector‘>扇形</div> <xmp> .sector{ width: 100px; height: 100px; background: red; line-height: 100px; text-align: center; color: white; border-radius: 200px 0 0 0; } </xmp> <!-- arc --> <div class=‘arc‘>弧形</div> <xmp> .arc{ width: 100px; height: 100px; background: red; line-height: 100px; text-align: center; color: white; border-radius: 100px 0; } </xmp> <!-- triangle --> <div class=‘triangle‘>三角形</div> <xmp> .triangle{ width: 0px; height: 0px; border-width: 100px; border-style: solid; border-top-color: black; border-bottom-color: green; border-left-color: yellow; border-right-color: gray; } </xmp> <!-- arrow --> <div class=‘arrow‘>三角形</div> <xmp> .arrow{ width: 0px; height: 0px; border-width: 100px; border-style: solid; border-top-color: black; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; } </xmp> <div class=‘triangle2‘></div> <xmp> .triangle2{ width: 50px; height: 50px; border-width: 50px; border-style: solid; border-top-color: black; border-bottom-color: green; border-left-color: transparent; border-right-color: transparent; } </xmp> <div class=‘triangle3‘></div> <xmp> .triangle3{ width: 50px; height: 50px; border-width: 50px; border-style: solid; border-top-color: black; border-bottom-color: green; border-left-color: transparent; border-right-color: transparent; border-radius: 50%; } </xmp> <div class="parent"> <div class=‘triangle4‘></div> </div> <xmp> .triangle4{ width: 50px; height: 50px; border-width: 10px; border-style: solid; border-top-color: black; border-bottom-color: green; border-left-color: red; border-right-color: transparent; border-radius: 50%; clip: rect(0 50px 70px 0); left: 0; top: 0; position: absolute; } </xmp> <div class=‘triangle5‘></div> <xmp> .triangle5{ width: 100px; height: 100px; border-top: 10px solid black; border-radius: 100px; } </xmp> </body> </html>
