CSS画出的图_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

CSS画出的图_html/css_WEB-ITnose

WBOY

풀어 주다： 2016-06-24 11:32:14

원래의

928명이 탐색했습니다.

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

로그인 후 복사

持续更新…………