recherche

Maison  >  Article  >  interface Web  >  CSS画出的图_html/css_WEB-ITnose

CSS画出的图_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:32:14928parcourir

目录 [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);}

 

持续更新…………

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Day_1.《无懈可击的Web设计》_灵活的文字_html/css_WEB-ITnoseArticle suivant：easyui messager.alert 标题怎么不显示_html/css_WEB-ITnose

Articles Liés

Voir plus