CSS3 画基本图形,圆形、椭圆形、三角形等


Posted in HTML / CSS onSeptember 20, 2016

CSS3 圆形
#css3-circle{
 width: 150px;
 height: 150px;
 border-radius: 50%;
 background-color: #232323;}
CSS3 椭圆形
#css3-elipse{
 width: 200px;
 height: 100px;
 border-radius: 50%;
 background-color: #232323;}
CSS3 三角形
#css3-triangle{
 width: 0;
 height: 0;
 border-left: 100px solid transparent;
 border-right: 100px solid transparent;
 border-bottom: 150px solid #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: 100px solid #232323;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
}
CSS3 六角星
#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 五角星
#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 五边形
#css3-pentagon {
 position: relative;
 width: 54px;
 border-width: 50px 18px 0;
 border-style: solid;
 border-color: #232323 transparent;}#css3-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 #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: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 25px solid #232323; }#css3-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 #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: 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%;
}#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: 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;
}

HTML / CSS 相关文章推荐
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 #HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 #HTML / CSS
a标签下载链接的简单实现
Sep 13 #HTML / CSS
HTML5新增加的功能详解
Sep 05 #HTML / CSS
HTML5新增加标签和功能概述
Sep 05 #HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 #HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 #HTML / CSS
You might like
一个php作的文本留言本的例子(五)
2006/10/09 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
浅析PHP Socket技术
2013/08/02 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
用JavaScript实现动画效果的方法
2013/07/20 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
python SocketServer源码深入解读
2019/09/17 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
基于python实现查询ip地址来源
2020/06/02 Python
详解Python高阶函数
2020/08/15 Python
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
寄语是什么意思
2014/04/10 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python