html5中文学习网

您的位置: 首页 > html5教程 > 高级应用 » 正文

CSS3 画基本图形,圆形、椭圆形、三角形等_html5教程技巧

[ ] 已经帮助:人解决问题
CSS3 圆形B34HTML5中文学习网 - HTML5先行者学习网
#css3-circle{B34HTML5中文学习网 - HTML5先行者学习网
 width: 150px;B34HTML5中文学习网 - HTML5先行者学习网
 height: 150px;B34HTML5中文学习网 - HTML5先行者学习网
 border-radius: 50%;B34HTML5中文学习网 - HTML5先行者学习网
 background-color: #232323;}B34HTML5中文学习网 - HTML5先行者学习网
CSS3 椭圆形B34HTML5中文学习网 - HTML5先行者学习网
#css3-elipse{B34HTML5中文学习网 - HTML5先行者学习网
 width: 200px;B34HTML5中文学习网 - HTML5先行者学习网
 height: 100px;B34HTML5中文学习网 - HTML5先行者学习网
 border-radius: 50%;B34HTML5中文学习网 - HTML5先行者学习网
 background-color: #232323;}B34HTML5中文学习网 - HTML5先行者学习网
CSS3 三角形B34HTML5中文学习网 - HTML5先行者学习网
#css3-triangle{B34HTML5中文学习网 - HTML5先行者学习网
 width: 0;B34HTML5中文学习网 - HTML5先行者学习网
 height: 0;B34HTML5中文学习网 - HTML5先行者学习网
 border-left: 100px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
 border-right: 100px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
 border-bottom: 150px solid #232323;}B34HTML5中文学习网 - HTML5先行者学习网
CSS3 平行四边形B34HTML5中文学习网 - HTML5先行者学习网
#css3-parallelogram{B34HTML5中文学习网 - HTML5先行者学习网
 width: 200px;B34HTML5中文学习网 - HTML5先行者学习网
 height: 100px;B34HTML5中文学习网 - HTML5先行者学习网
 background: #232323;B34HTML5中文学习网 - HTML5先行者学习网
 -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -o-transform: skew(-45deg);B34HTML5中文学习网 - HTML5先行者学习网
 transform: skew(-45deg);B34HTML5中文学习网 - HTML5先行者学习网
}B34HTML5中文学习网 - HTML5先行者学习网
CSS3 梯形B34HTML5中文学习网 - HTML5先行者学习网
#css3-trapezoid{B34HTML5中文学习网 - HTML5先行者学习网
 width: 100px;B34HTML5中文学习网 - HTML5先行者学习网
 height: 0;B34HTML5中文学习网 - HTML5先行者学习网
 border-bottom: 100px solid #232323;B34HTML5中文学习网 - HTML5先行者学习网
 border-left: 50px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
 border-right: 50px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
}B34HTML5中文学习网 - HTML5先行者学习网
CSS3 六角星B34HTML5中文学习网 - HTML5先行者学习网
#css3-six-star{B34HTML5中文学习网 - HTML5先行者学习网
 width: 0;B34HTML5中文学习网 - HTML5先行者学习网
 height: 0;B34HTML5中文学习网 - HTML5先行者学习网
 position: relative;B34HTML5中文学习网 - HTML5先行者学习网
 border-bottom: 100px solid #232323;B34HTML5中文学习网 - HTML5先行者学习网
 border-left: 50px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
 border-right: 50px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
}#css3-six-star:after{B34HTML5中文学习网 - HTML5先行者学习网
 content: "";B34HTML5中文学习网 - HTML5先行者学习网
 width: 0;B34HTML5中文学习网 - HTML5先行者学习网
 height: 0;B34HTML5中文学习网 - HTML5先行者学习网
 position: absolute;B34HTML5中文学习网 - HTML5先行者学习网
 left: -50px;B34HTML5中文学习网 - HTML5先行者学习网
 top: 35px;B34HTML5中文学习网 - HTML5先行者学习网
 border-top: 100px solid #232323;B34HTML5中文学习网 - HTML5先行者学习网
 border-left: 50px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
 border-right: 50px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
}B34HTML5中文学习网 - HTML5先行者学习网
CSS3 五角星B34HTML5中文学习网 - HTML5先行者学习网
#css3-five-star{B34HTML5中文学习网 - HTML5先行者学习网
 width: 0px;B34HTML5中文学习网 - HTML5先行者学习网
 height: 0px;B34HTML5中文学习网 - HTML5先行者学习网
 margin: 50px 0;B34HTML5中文学习网 - HTML5先行者学习网
 position: relative;B34HTML5中文学习网 - HTML5先行者学习网
 display: block;B34HTML5中文学习网 - HTML5先行者学习网
 color: #232323;B34HTML5中文学习网 - HTML5先行者学习网
 border-right: 100px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
 border-bottom: 70px  solid #232323;B34HTML5中文学习网 - HTML5先行者学习网
 border-left:100px solid transparent; -moz-transform:rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform:rotate(35deg); -o-transform:rotate(35deg);B34HTML5中文学习网 - HTML5先行者学习网
}#css3-five-star:before{B34HTML5中文学习网 - HTML5先行者学习网
 border-bottom: 80px solid #232323;;B34HTML5中文学习网 - HTML5先行者学习网
 border-left: 30px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
 border-right: 30px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
 position: absolute;B34HTML5中文学习网 - HTML5先行者学习网
 height: 0;B34HTML5中文学习网 - HTML5先行者学习网
 width: 0;B34HTML5中文学习网 - HTML5先行者学习网
 top: -45px;B34HTML5中文学习网 - HTML5先行者学习网
 left: -63px;B34HTML5中文学习网 - HTML5先行者学习网
 display: block;B34HTML5中文学习网 - HTML5先行者学习网
 content: ''; -webkit-transform: rotate(-35deg); -moz-transform:rotate(-35deg); -ms-transform:rotate(-35deg); -o-transform:rotate(-35deg);B34HTML5中文学习网 - HTML5先行者学习网
}#css3-five-star:after{B34HTML5中文学习网 - HTML5先行者学习网
 position: absolute;B34HTML5中文学习网 - HTML5先行者学习网
 display: block;B34HTML5中文学习网 - HTML5先行者学习网
 color: #232323;B34HTML5中文学习网 - HTML5先行者学习网
 top: 3px;B34HTML5中文学习网 - HTML5先行者学习网
 left: -105px;B34HTML5中文学习网 - HTML5先行者学习网
 width: 0px;B34HTML5中文学习网 - HTML5先行者学习网
 height: 0px;B34HTML5中文学习网 - HTML5先行者学习网
 border-right: 100px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
 border-bottom: 70px solid #232323;B34HTML5中文学习网 - HTML5先行者学习网
 border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform:rotate(-70deg); -ms-transform:rotate(-70deg); -o-transform:rotate(-70deg);B34HTML5中文学习网 - HTML5先行者学习网
 content: '';B34HTML5中文学习网 - HTML5先行者学习网
}B34HTML5中文学习网 - HTML5先行者学习网
CSS3 五边形B34HTML5中文学习网 - HTML5先行者学习网
#css3-pentagon {B34HTML5中文学习网 - HTML5先行者学习网
 position: relative;B34HTML5中文学习网 - HTML5先行者学习网
 width: 54px;B34HTML5中文学习网 - HTML5先行者学习网
 border-width: 50px 18px 0;B34HTML5中文学习网 - HTML5先行者学习网
 border-style: solid; B34HTML5中文学习网 - HTML5先行者学习网
 border-color: #232323 transparent;}#css3-pentagon:before {B34HTML5中文学习网 - HTML5先行者学习网
 content: "";B34HTML5中文学习网 - HTML5先行者学习网
 position: absolute;B34HTML5中文学习网 - HTML5先行者学习网
 height: 0;B34HTML5中文学习网 - HTML5先行者学习网
 width: 0;B34HTML5中文学习网 - HTML5先行者学习网
 top: -85px;B34HTML5中文学习网 - HTML5先行者学习网
 left: -18px;B34HTML5中文学习网 - HTML5先行者学习网
 border-width: 0 45px 35px;B34HTML5中文学习网 - HTML5先行者学习网
 border-style: solid;B34HTML5中文学习网 - HTML5先行者学习网
 border-color: transparent transparent #232323;}B34HTML5中文学习网 - HTML5先行者学习网
CSS3 六边形B34HTML5中文学习网 - HTML5先行者学习网
#css3-hexagon {B34HTML5中文学习网 - HTML5先行者学习网
 width: 100px;B34HTML5中文学习网 - HTML5先行者学习网
 height: 55px;B34HTML5中文学习网 - HTML5先行者学习网
 background: #232323; B34HTML5中文学习网 - HTML5先行者学习网
 position: relative;B34HTML5中文学习网 - HTML5先行者学习网
}#css3-hexagon:before {B34HTML5中文学习网 - HTML5先行者学习网
 content: "";B34HTML5中文学习网 - HTML5先行者学习网
 position: absolute;B34HTML5中文学习网 - HTML5先行者学习网
 top: -25px;B34HTML5中文学习网 - HTML5先行者学习网
 left: 0;B34HTML5中文学习网 - HTML5先行者学习网
 width: 0;B34HTML5中文学习网 - HTML5先行者学习网
 height: 0;B34HTML5中文学习网 - HTML5先行者学习网
 border-left: 50px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
 border-right: 50px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
 border-bottom: 25px solid #232323; }#css3-hexagon:after {B34HTML5中文学习网 - HTML5先行者学习网
 content: "";B34HTML5中文学习网 - HTML5先行者学习网
 position: absolute;B34HTML5中文学习网 - HTML5先行者学习网
 bottom: -25px;B34HTML5中文学习网 - HTML5先行者学习网
 left: 0;B34HTML5中文学习网 - HTML5先行者学习网
 width: 0;B34HTML5中文学习网 - HTML5先行者学习网
 height: 0;B34HTML5中文学习网 - HTML5先行者学习网
 border-left: 50px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
 border-right: 50px solid transparent;B34HTML5中文学习网 - HTML5先行者学习网
 border-top: 25px solid #232323; }B34HTML5中文学习网 - HTML5先行者学习网
CSS3 心形B34HTML5中文学习网 - HTML5先行者学习网
#css3-heart {B34HTML5中文学习网 - HTML5先行者学习网
 position: relative;B34HTML5中文学习网 - HTML5先行者学习网
 width: 100px;B34HTML5中文学习网 - HTML5先行者学习网
 height: 90px;B34HTML5中文学习网 - HTML5先行者学习网
}#css3-heart:before, #css3-heart:after{B34HTML5中文学习网 - HTML5先行者学习网
 position: absolute;B34HTML5中文学习网 - HTML5先行者学习网
 content: "";B34HTML5中文学习网 - HTML5先行者学习网
 left: 50px;B34HTML5中文学习网 - HTML5先行者学习网
 top: 0;B34HTML5中文学习网 - HTML5先行者学习网
 width: 50px;B34HTML5中文学习网 - HTML5先行者学习网
 height: 80px;B34HTML5中文学习网 - HTML5先行者学习网
 background: #232323;B34HTML5中文学习网 - HTML5先行者学习网
 -moz-border-radius: 50px 50px 0 0;B34HTML5中文学习网 - HTML5先行者学习网
 border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);B34HTML5中文学习网 - HTML5先行者学习网
 transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%;B34HTML5中文学习网 - HTML5先行者学习网
 transform-origin: 0 100%;B34HTML5中文学习网 - HTML5先行者学习网
}#css3-heart:after {B34HTML5中文学习网 - HTML5先行者学习网
 left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);B34HTML5中文学习网 - HTML5先行者学习网
 transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%;B34HTML5中文学习网 - HTML5先行者学习网
 transform-origin :100% 100%;B34HTML5中文学习网 - HTML5先行者学习网
}B34HTML5中文学习网 - HTML5先行者学习网
CSS3 八卦B34HTML5中文学习网 - HTML5先行者学习网
#css3-gossip {B34HTML5中文学习网 - HTML5先行者学习网
 width: 96px;B34HTML5中文学习网 - HTML5先行者学习网
 height: 48px;B34HTML5中文学习网 - HTML5先行者学习网
 background: #f1f1f1;B34HTML5中文学习网 - HTML5先行者学习网
 border-color: #232323;B34HTML5中文学习网 - HTML5先行者学习网
 border-style: solid;B34HTML5中文学习网 - HTML5先行者学习网
 border-width: 2px 2px 50px 2px;B34HTML5中文学习网 - HTML5先行者学习网
 border-radius: 100%;B34HTML5中文学习网 - HTML5先行者学习网
 position: relative;B34HTML5中文学习网 - HTML5先行者学习网
}#css3-gossip:before{B34HTML5中文学习网 - HTML5先行者学习网
  content: "";B34HTML5中文学习网 - HTML5先行者学习网
  position: absolute;B34HTML5中文学习网 - HTML5先行者学习网
  top: 50%;B34HTML5中文学习网 - HTML5先行者学习网
  left: 0;B34HTML5中文学习网 - HTML5先行者学习网
  background: #f1f1f1;B34HTML5中文学习网 - HTML5先行者学习网
  border: 18px solid #232323;B34HTML5中文学习网 - HTML5先行者学习网
  border-radius: 100%;B34HTML5中文学习网 - HTML5先行者学习网
  width: 12px;B34HTML5中文学习网 - HTML5先行者学习网
  height: 12px;B34HTML5中文学习网 - HTML5先行者学习网
}#css3-gossip:after {B34HTML5中文学习网 - HTML5先行者学习网
 content: "";B34HTML5中文学习网 - HTML5先行者学习网
 position: absolute;B34HTML5中文学习网 - HTML5先行者学习网
 top: 50%;B34HTML5中文学习网 - HTML5先行者学习网
 left: 50%;B34HTML5中文学习网 - HTML5先行者学习网
 background: #232323;B34HTML5中文学习网 - HTML5先行者学习网
 border: 18px solid #f1f1f1;B34HTML5中文学习网 - HTML5先行者学习网
 border-radius:100%;B34HTML5中文学习网 - HTML5先行者学习网
 width: 12px;B34HTML5中文学习网 - HTML5先行者学习网
 height: 12px;B34HTML5中文学习网 - HTML5先行者学习网
}B34HTML5中文学习网 - HTML5先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助