CSS3实现的11种基本图形代码

2024-01-17 16:29 小编
  CSS3圆角
 
  #css3-circle{
 
  width:150px;
 
  height:150px;
 
  border-radius:50%;
 
  }
 
  CSS3椭圆形css3radius
 
  #css3-elipse{
 
  width:200px;
 
  height:100px;
 
  border-radius:50%;
 
  }
 
  CSS3三角形
 
  #css3-triangle{
 
  width:0;
 
  height:0;
 
  border-left:100pxsolidtransparent;
 
  border-right:100pxsolidtransparent;
 
  border-bottom:150pxsolid#232323;}
 
  CSS3平行四边形
 
  #css3-parallelogram{
 
  width:200px;
 
  height:100px;
 
  background:#232323;
 
  -webkit-transform:skew(-45deg);-moz-transform:skew(-45deg);-o-transform:skew(-45deg);
 
  transform:skew(-45deg);
 
  }
 
  CSS3梯形
 
  #css3-trapezoid{
 
  width:100px;
 
  height:0;
 
  border-bottom:100pxsolid#232323;
 
  border-left:50pxsolidtransparent;
 
  border-right:50pxsolidtransparent;
 
  }
 
  CSS3六角星
 
  
 
  #css3-six-star{
 
  width:0;
 
  height:0;
 
  position:relative;
 
  border-bottom:100pxsolid#232323;
 
  border-left:50pxsolidtransparent;
 
  border-right:50pxsolidtransparent;
 
  }#css3-six-star:after{
 
  content:"";
 
  width:0;
 
  height:0;
 
  position:absolute;
 
  left:-50px;
 
  top:35px;
 
  border-top:100pxsolid#232323;
 
  border-left:50pxsolidtransparent;
 
  border-right:50pxsolidtransparent;
 
  }
 
  CSS3五角星css3transform
 
  
 
  
 
  #css3-five-star{
 
  width:0px;
 
  height:0px;
 
  margin:50px0;
 
  position:relative;
 
  display:block;
 
  color:#232323;
 
  border-right:100pxsolidtransparent;
 
  border-bottom:70pxsolid#232323;
 
  border-left:100pxsolidtransparent;-moz-transform:rotate(35deg);-webkit-transform:rotate(35deg);-ms-transform:rotate(35deg);-o-transform:rotate(35deg);
 
  }#css3-five-star:before{
 
  border-bottom:80pxsolid#232323;;
 
  border-left:30pxsolidtransparent;
 
  border-right:30pxsolidtransparent;
 
  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:100pxsolidtransparent;
 
  border-bottom:70pxsolid#232323;
 
  border-left:100pxsolidtransparent;-webkit-transform:rotate(-70deg);-moz-transform:rotate(-70deg);-ms-transform:rotate(-70deg);-o-transform:rotate(-70deg);
 
  content:'';
 
  }
 
  CSS3五边形
 
  
 
  #css3-pentagon{
 
  position:relative;
 
  width:54px;
 
  border-width:50px18px0;
 
  border-style:solid;
 
  border-color:#232323transparent;}#css3-pentagon:before{
 
  content:"";
 
  position:absolute;
 
  height:0;
 
  width:0;
 
  top:-85px;
 
  left:-18px;
 
  border-width:045px35px;
 
  border-style:solid;
 
  border-color:transparenttransparent#232323;}
 
  CSS3六边形
 
  
 
  #css3-hexagon{
 
  width:100px;
 
  height:55px;
 
  background:#232323;
 
  position:relative;
 
  }#css3-hexagon:before{
 
  content:"";
 
  position:absolute;
 
  top:-25px;
 
  left:0;
 
  width:0;
 
  height:0;
 
  border-left:50pxsolidtransparent;
 
  border-right:50pxsolidtransparent;
 
  border-bottom:25pxsolid#232323;}#css3-hexagon:after{
 
  content:"";
 
  position:absolute;
 
  bottom:-25px;
 
  left:0;
 
  width:0;
 
  height:0;
 
  border-left:50pxsolidtransparent;
 
  border-right:50pxsolidtransparent;
 
  border-top:25pxsolid#232323;}
 
  CSS3心形
 
  
 
  #css3-heart{
 
  position:relative;
 
  width:100px;
 
  height:90px;
 
  }#css3-heart:before,#css3-heart:after{
 
  position:absolute;
 
  content:"";
 
  left:50px;
 
  top:0;
 
  width:50px;
 
  height:80px;
 
  background:#232323;
 
  -moz-border-radius:50px50px00;
 
  border-radius:50px50px00;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);
 
  transform:rotate(-45deg);-webkit-transform-origin:0100%;-moz-transform-origin:0100%;-ms-transform-origin:0100%;-o-transform-origin:0100%;
 
  transform-origin:0100%;
 
  }#css3-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%;
 
  }
 
  CSS3八卦
 
  
 
  #css3-gossip{
 
  width:96px;
 
  height:48px;
 
  background:#f1f1f1;
 
  border-color:#232323;
 
  border-style:solid;
 
  border-width:2px2px50px2px;
 
  border-radius:100%;
 
  position:relative;
 
  }#css3-gossip:before{
 
  content:"";
 
  position:absolute;
 
  top:50%;
 
  left:0;
 
  background:#f1f1f1;
 
  border:18pxsolid#232323;
 
  border-radius:100%;
 
  width:12px;
 
  height:12px;
 
  }#css3-gossip:after{
 
  content:"";
 
  position:absolute;
 
  top:50%;
 
  left:50%;
 
  background:#232323;
 
  border:18pxsolid#f1f1f1;
 
  border-radius:100%;
 
  width:12px;
 
  height:12px;
 
  }


Tag: 代码
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码