CSS各种图形绘制

最新推荐文章于 2022-12-02 12:08:41 发布
HawkSmith
最新推荐文章于 2022-12-02 12:08:41 发布
阅读量1.9k
点赞数 1
分类专栏： javascript 文章标签： css
本文链接：https://blog.csdn.net/fense_520/article/details/37892507
版权
javascript 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
<!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>