<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>CSS各种形状的div样式
原文地址：https://www.cnblogs.com/lay2017/p/8572788.html