Home > Article > Web Front-end > CSS画出的图_html/css_WEB-ITnose

CSS画出的图_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 11:32:14892browse

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

持续更新…………

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Day_1.《无懈可击的Web设计》_灵活的文字_html/css_WEB-ITnoseNext article：easyui messager.alert 标题怎么不显示_html/css_WEB-ITnose

See more