目录 [1]矩形 [2]圆形 [3]椭圆 [4]直角三角形 [5]正三角形 [6]平行四边形 [7]梯形 [8]六角星 [9]六边形 [10]五角星
div{ width: 100px; height: 100px; background-color: red;}
div{ width: 100px; height: 100px; background-color: red; border-radius: 50%;}
div{ width: 100px; height: 50px; background-color: red; border-radius: 50%;}
div{ width: 0; height: 0; border: 50px solid transparent; border-bottom-color: red;}
div{ width: 0; height: 0; border: 50px solid transparent; border-width: 86.6px 50px; border-bottom-color: red;}
div{ margin-left: 50px; width: 100px; height: 100px; background-color: red; transform: skew(30deg);}
div{ width: 50px; border: 50px solid transparent; border-bottom-color: red;}
两个三角形叠压
div{ position: relative; width: 0; border: 50px solid transparent; border-width: 50px 43.4px; border-bottom-color: red;}div:after{ position: absolute; content:""; width: 0; border: 50px solid transparent; border-width: 50px 43.4px; border-top-color: red; top: 16px; left: -42px;}两个梯形拼接
div{ position: relative; width: 50px; border: 50px solid transparent; border-bottom-color: red;}div:after{ position: absolute; content:""; width: 50px; border: 50px solid transparent; border-top-color: red; top:50px; left: -50px;}一个大三角形底部掏掉一个小三角形；两个前面的相同图形叠压
<body> <div></div> <div></div> </body>
div { margin-left: 100px; position: relative; width: 0px; border: 50px solid transparent; border-width: 100px 35px; border-bottom-color: red; } div:after{ content: ""; position:absolute; width: 0; border: 100px solid transparent; border-width: 25px 50px; border-bottom-color: white; top: 51px; left: -50px;}div:last-child{ top: -164px; left: 52px; transform: rotate(72deg);}
持续更新…………
