Heim > Artikel > Web-Frontend > CSS画出的图_html/css_WEB-ITnose
CSS画出的图_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:32:14926Durchsuche
目录 [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);}
持续更新…………
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Day_1.《无懈可击的Web设计》_灵活的文字_html/css_WEB-ITnoseNächster Artikel：easyui messager.alert 标题怎么不显示_html/css_WEB-ITnose