博客列表 >css 制作图形

css 制作图形

Bystander
Bystander原创
2018年07月06日 11:02:31745浏览

 

效果展示:20180615152536.png

 代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>  
 /* 圆形*/
   #css3-circle{ 
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #232323;}
     
     /* 椭圆形 */
   #css3-elipse{
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background-color: #232323;}

    /* 三角形*/
   #css3-triangle{
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 150px solid #232323;}

    /* 平行四边形 */
   #css3-parallelogram{
  width: 200px;
  height: 100px;
  background: #232323;
  -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -o-transform: skew(-45deg);
  transform: skew(-45deg);
 }

 /* 梯形 */
   #css3-trapezoid{
  width: 100px;
  height: 0;
  border-bottom: 100px solid #232323;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
 }

 /* 六角星 */
 #css3-six-star{
  width: 0;
  height: 0;
  position: relative;
  border-bottom: 100px solid #232323;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
 }
 #css3-six-star:after{
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: -50px;
  top: 35px;
  border-top: 100px solid #232323;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
 }
  
     /* 五角星 */
   #css3-five-star{
  width: 0px;
  height: 0px;
  margin: 50px 0;
  position: relative;
  display: block;
  color: #232323;
  border-right: 100px solid transparent;
  border-bottom: 70px  solid #232323;
  border-left:100px solid transparent; -moz-transform:rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform:rotate(35deg); -o-transform:rotate(35deg);
 }#css3-five-star:before{
  border-bottom: 80px solid #232323;;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -63px;
  display: block;
  content: ''; -webkit-transform: rotate(-35deg); -moz-transform:rotate(-35deg); -ms-transform:rotate(-35deg); -o-transform:rotate(-35deg);
 }#css3-five-star:after{
  position: absolute;
  display: block;
  color: #232323;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #232323;
  border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform:rotate(-70deg); -ms-transform:rotate(-70deg); -o-transform:rotate(-70deg);
  content: '';
 }
  
   /* 八卦 */
   #css3-gossip {
  width: 96px;
  height: 48px;
  background: #f1f1f1;
  border-color: #232323;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
 }
 #css3-gossip:before{
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   background: #f1f1f1;
   border: 18px solid #232323;
   border-radius: 100%;
   width: 12px;
   height: 12px;
 }#css3-gossip:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #232323;
  border: 18px solid #f1f1f1;
  border-radius:100%;
  width: 12px;
  height: 12px;
 }

 </style>
</head>
<body>
 
    <div id="css3-circle">圆形</div>
    <div id="css3-elipse">椭圆形</div>
    <div id="css3-trapezoid">梯形</div>
    <div id="css3-elipse">三角形</div>
    <div id="css3-parallelogram">平行四边形</div>
    <div id="css3-five-star">五角星</div>
    <div id="css3-six-star">六角星</div>
    <div id="css3-gossip">八卦</div>

</body>
</html>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议