CSS画出的图_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:32:14892瀏覽
目录 [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);}
持续更新…………
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn