CSS画出的图_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:32:14926검색
目录 [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으로 문의하세요.