码迷，mamicode.com
首页 > Web开发 > 详细

CSS各种图形绘制

时间：2017-05-06 13:07:41      阅读：226      评论：0      收藏：0      [点我收藏+]

标签：absolute   art   osi   back   lock   提示   webkit   ack   type   

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画图</title>
<style type="text/css">

div{
   background:black;
}

/*绘正方形*/
.square{
   width:100px;
   height:100px;
}

/*绘长方形*/
.retangle{
  width:200px;
  height:100px;
}

/*画图形*/
.cirecle{
   width:100px;
   height:100px;
   border-radius:50px;   /*把边框设置为圆角*/
}

/*图柱形*/
.cylinder{
  width:100px;
  height:100px;
  border-radius:100px/50px;
}
/*椭圆形*/
.oval{
  width:200px;
  height:100px;
  border-radius:100px/50px;
}
/*上三角形*/
.tirangle-up{
   width:0px;
   height:0px;
   border-left:50px solid transparent;
   border-right:50px solid transparent;
   border-bottom:100px solid red;
}
/*下三角形*/
.tirangle-down{
   width:0px;
   height:0px;
   border-left:50px solid transparent;
   border-right:50px solid transparent;
   border-top:100px solid red;
}

/*平边三角形*/
.tirangle-equal{
   width:0px;
   height:0px;
   border-left:50px solid transparent;
   border-right:50px solid transparent;
   border-bottom:50px solid red;
}
/*左边三角形*/
.tirangle-left{
   width:0px;
   height:0px;
   border-top:50px solid transparent;
   border-right:100px solid red;
   border-bottom:50px solid transparent;
}
/*右边三角形*/
.tirangle-right{
   width:0px;
   height:0px;
   border-top:50px solid transparent;
   border-left:100px solid red;
   border-bottom:50px solid transparent;
}
/*左上三角形*/
.tirangle-left-up{
   width:0px;
   height:0px;
   border-top:100px solid red;
   border-right:200px solid transparent;

}
/*右上三角形*/
.tirangle-right-up{
   width:0px;
   height:0px;
   border-top:100px solid red;
   border-left:200px solid transparent;

}
/*左下三角形*/
.tirangle-left-down{
   width:0px;
   height:0px;
   border-bottom:100px solid red;
   border-right:200px solid transparent;

}
/*左下三角形*/
.tirangle-right-down{
   width:0px;
   height:0px;
   border-bottom:100px solid red;
   border-left:200px solid transparent;

}
/*平行四边形*/
.parallelogram {
    width:150px;
    height:100px;
     margin-left:20px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
}
/*梯形*/
.trapezoid{
   widht:100px;
   height:0px;
   border-bottom: 100px solid  red;
   border-left:50px solid transparent;
   border-right:50px solid transparent;
}
/*六角星*/
.star-six{
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:100px solid red;
    position:relative;
}
.star-six:after{

    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-top:100px solid red;
    position:absolute;
    content:"";
    top:30px;
    left:-50px;
}

/*五角星*/
.star-five {
   margin:50px 0;
   position:relative;
   display:block;
   color:red;
   width:0px;
   height:0px;
   border-right: 100px solid transparent;
   border-bottom:70px  solid red;
   border-left:  100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
.star-five:before {
   border-bottom:80px solid red;
   border-left:30px   solid transparent;
   border-right:30px   solid transparent;
   position:absolute;
   height:0;
   width:0;
   top:-45px;
   left:-65px;
   display:block;
   content:‘‘;
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
    
}
.star-five:after {
   position:absolute;
   display:block;
   color:red;
   top:3px;
   left:-105px;
   width:0px;
   height:0px;
   border-right:100px solid transparent;
   border-bottom:70px solid red;
   border-left:100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content:‘‘;
} 

/*五角大楼*/
.pentagon {
    position:relative;
    width:54px;
    border-width:50px 18px 0;
    border-style:solid;
    border-color:red transparent;
}
.pentagon:before {
    content:"";
    position:absolute;
    height:0;
    width:0;
    top:-85px;
    left:-18px;
    border-width:0 45px 35px;
    border-style:solid;
    border-color:transparent transparent red;
}

/*六边形*/
.hexagon {
    width:100px;
    height:55px;
    background:red;
    position:relative;
}
.hexagon:before {
    content:"";
    position:absolute;
    top:-25px;
    left:0;
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:25px solid red;
}
.hexagon:after {
    content:"";
    position:absolute;
    bottom:-25px;
    left:0;
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-top:25px solid red;
}

/*八角形*/
.octagon {
    width:100px;
    height:100px;
    background:red;
    position:relative;
}
  
.octagon:before {
    content:"";
    position:absolute;
    top:0;
    left:0;   
    border-bottom:29px solid red;
    border-left:29px   solid #eee;
    border-right:29px  solid #eee;
    width:42px;
    height:0;
}
  
.octagon:after {
    content:"";
    position:absolute;
    bottom:0;
    left:0;   
    border-top:29px   solid red;
    border-left:29px  solid #eee;
    border-right:29px solid #eee;
    width:42px;
    height:0;
}

/*爱心*/
.heart {
    position:relative;
    width:100px;
    height:90px;
}
.heart:before,
.heart:after {
    position:absolute;
    content:"";

    left:50px;
    top:0;
    width:50px;
    height:80px;
    background:red;
    -moz-border-radius:50px 50px 0 0;
    border-radius:50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin:0 100%;
       -moz-transform-origin:0 100%;
        -ms-transform-origin:0 100%;
         -o-transform-origin:0 100%;
            transform-origin:0 100%;
}
.heart:after {
    left:0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin:100% 100%;
       -moz-transform-origin:100% 100%;
        -ms-transform-origin:100% 100%;
         -o-transform-origin:100% 100%;
            transform-origin :100% 100%;
}     


/*无穷大符号*/
.infinity {
    position:relative;
    width:212px;
    height:100px;
}
  
.infinity:before,
.infinity:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:60px;
    height:60px;   
    border:20px solid red;
    -moz-border-radius:50px 50px 0 50px;
         border-radius:50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
  
.infinity:after {
    left:auto;
    right:0;
    -moz-border-radius:50px 50px 50px 0;
         border-radius:50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}           


/*鸡蛋*/
.egg {
   display:block;
   width:126px;
   height:180px;
   background-color:red;
   -webkit-border-radius:63px 63px 63px 63px/108px 108px 72px72px;
   border-radius:       50%   50%  50%  50%  /60%   60%   40%  40%;
}

/*药丸*/
.pill {
  width:0px;
  height:0px;
  border-right:60px solid transparent;
  border-top:60px solid red;
  border-left:60  pxsolid red;
  border-bottom:60px solid red;
  border-top-left-radius:60px;
  border-top-right-radius:60px;
  border-bottom-left-radius:60px;
  border-bottom-right-radius:60px;
}


/*提示框*/
.talkbubble {
   width:120px;
   height:80px;
   background:red;
   position:relative;
   -moz-border-radius:   10px;
   -webkit-border-radius:10px;
   border-radius:        10px;
}
.talkbubble:before {
   content:"";
   position:absolute;
   right:100%;
   top:26px;
   width:0;
   height:0;
   border-top:13px solid transparent;
   border-right:26px solid red;
   border-bottom:13px solid transparent;
}

/*钻石*/
.cut-diamond {
    border-style:solid;
    border-color:transparent transparent red transparent;
    border-width:0 25px 25px 25px;
    height:0;
    width:50px;
    position:relative;
    margin:20px 0 50px 0;
}
.cut-diamond:after {
    content:"";
    position:absolute;
    top:25px;
    left:-25px;
    width:0;
    height:0;
    border-style:solid;
    border-color:red transparent transparent transparent;
    border-width:70px 50px 0 50px;
}
</style>
</head>
<body>
   
     <div class="cut-diamond"></div>

</body>
</html>

CSS各种图形绘制

标签：absolute   art   osi   back   lock   提示   webkit   ack   type   

原文地址：http://www.cnblogs.com/ljbguanli/p/6816122.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！