CSS画出的图_html/css_WEB-ITnose-html教程-PHP中文网

CSS画出的图_html/css_WEB-ITnose

WBOY

发布： 2016-06-24 11:32:14

原创

929 人浏览过

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

登录后复制

持续更新…………