CSS3新特性,绘制常见图形
前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等。以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形。
在此之前我们有必要了解下什么是伪元素(和它不同的,还有一个概念叫伪类,两者容易混淆),没有它画不成图形的。
a)伪元素:用来在内容元素的前后插入额外的元素,之所以叫伪元素,就是它们根本就不在文档中生成,只能在外部可见,比如:你F12时,在右边代码框中是不是可以看到?
这里用到的两个伪元素 ①元素之前:before ②元素之后:after
1)圆,没必要了,我们看看三角形
/* CSS */
.sanjiao {
width: 0px;
height: 0px;
margin: 30px auto;
position: relative;
border: 100px solid transparent;
border-bottom: 100px solid #3C98D1;/*这里的100px 就是三角形在竖直方向上高度 也就是三角形的高*/
/*border-left: 100px solid #96D1DF;/* 还可以写不同方向上的三角形 */
border-right: 100px solid #5E5E5E;
border-top: 100px solid #3C98D1;*/
} /* HTML */
<div class="sanjiao"></div>
2)圆柱
/* CSS */
.yuanzhu {
position: relative;
height: 200px;
width: 50px;
background: #5E5E5E;
margin: 30px auto;
z-index: 999 /* 这个层叠顺序要设置下 不然看到的圆柱顶部不美观 看着就不想圆柱了 */
}
.yuanzhu:before {
position: absolute;
top: -10px;
content: "";
width: 50px;
height: 20px;
border-radius: 50%;
background: #A8A8A8;
z-index: 99
}
.yuanzhu:after {
position: absolute;
bottom: -10px;
content: "";
width: 50px;
height: 20px;
border-radius: 50%;
background: #5E5E5E;
z-index: 9
}
/* HTML */
<div class="yuanzhu"></div>
3)五角星
画五角星,我们要先知道浏览器几个私有前缀后跟的样式中"deg"表示的是旋转角度,比如“45deg”表示的就是顺时针旋转45度,负的就表示逆时针。
rotate了是transform的其中一个属性,表示2D旋转,也就是二维旋转,它也有三维旋转,transform还有另外几个特性,可以去看看http://www.w3school.com.cn/cssref/pr_transform.asp 它的几个特性,用的好,做出来的特效 逼格还是挺高的
/* CSS */
.wujiaox {
width: 0px;
height: 0px;
position: relative;
margin: 30px auto;
border: 100px solid transparent;
border-bottom: 70px solid #5E5E5E;
-webkit-transform: rotate(35deg);/* Safari和Chrome */
-moz-transform: rotate(35deg);/* Firefox */
-ms-transform: rotate(35deg);/* IE 9 */
-o-transform: rotate(35deg); /* Opera */
}
.wujiaox:after {
content: "";
width: 0px;
height: 0px;
display: block;
border-right: 100px solid transparent;
border-bottom: 70px solid #5E5E5E;
border-left: 100px solid transparent;
position: absolute;
top: 3px;
left: -105px;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
.wujiaox:before {
content: "";
width: 0;
height: 0;
border-bottom: 80px solid #5E5E5E;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
top: -45px;
left: -65px;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);/* 逆时针旋转35度 */
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
/* HTML */
<div class="wujiaox"></div>
画五角星时,要注意,一定要设置一个content:""; 不然你是看不到伪类元素所表现出的样式的;两个伪类元素都要设置为绝对定位,父元素设置相对.
4)聊天框
/* CSS */
.chatBox {
width: 200px;
height: 50px;
margin: 30px auto;
background: #5E5E5E;
border-radius: 5px;
position: relative;
} .chatBox:before {
content: "";
position: absolute;
width: 0px;
height: 0px;
right: 100%;
top: 15px;
border-top: 8px solid transparent;
border-right: 10px solid #5E5E5E;
border-bottom: 8px solid transparent;
}
/* HTML */
<div class="chatBox"></div>
5)八卦图,其实就是一个大半圆+两个小圆构成的
/* CSS */
.bagua {
width: 96px;
height: 48px;
background: #eee;
margin: 30px auto;
border-color: #000000;
border-style: solid;
border-radius: 100%;
border-width: 0.5px 0.5px 50px 0.5px;
position: relative;
} .bagua:before {
content: "";
border-radius: 100%;
background: #FFFFFF;
position: absolute;
top: 50%;
left: 0px;
border: 18px solid #000000;
width: 12px;
height: 12px;
} .bagua:after {
content: "";
border-radius: 100%;
background: #000000;
position: absolute;
top: 50%;
left: 50%;
border: 18px solid #eee;
width: 12px;
height: 12px;
} /* HTML */
<div class="bagua"></div>
6)“砖石”图形
首先画一个直角梯形,再通过伪类元素在其下方画一个三角形
/* CSS */
.zhuanshi {
width: 50px;
height: 0;
border-style: solid;
margin: 30px auto;
border-width: 0 25px 25px 25px;
position: relative;
border-color: transparent transparent #5E5E5E transparent;
} .zhuanshi:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 70px 50px 0 50px;
border-color: #5E5E5E transparent transparent transparent;
position: absolute;
top: 25px;
left: -25px;
} /* HTML */
<div class="zhuanshi"></div>
CSS3里还有很多话图形的方法方式,需要你慢慢去研究,虽然很少用到,但无聊时,拿来画画,还是挺有趣的.
交流群 : 192713488
CSS3新特性,绘制常见图形的更多相关文章
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- css3新特性总结
一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- 深入了解css3新特性
深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- css css3新特性
css css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
随机推荐
- iterm2
Mac下配置iterm2 http://www.dreamxu.com/mac-terminal/ 快捷键 http://cnbin.github.io/blog/2015/06/20/iterm2- ...
- 关于WM_GETTEXT的应用
HWND hw = ::FindWindow(NULL,"Form1"); HWND hw2 = ::FindWindowEx(hw,NULL,NULL,NULL); int le ...
- Visual Studio 2015 Update 2正式版下载地址
转载自:王彬的博客 地址:http://blog.sina.com.cn/s/blog_55f899fb0102wcwg.html Visual Studio Professional 2015(带 ...
- 在mvc里面有htmlhelper方法,在webform里面有什么?
终于是找到原来在webform里面已经提供了htmlcontrol这样的控件,可以直接拿来用.以前一直在想mvc有htmlhelper,webform里面不能用,其实是webform里面已经有了. 例 ...
- 华清远见成为ARM大学计划正式合作伙伴
来源:华清远见嵌入式学院 近日,华清远见教育集团成为ARM大学计划合作伙伴,这是ARM大学计划合作伙伴中的国内唯一教育机构.此次合作是ARM公司对华清远见教育集团的高度认可,也充分证明了华清远见这些年 ...
- Salesforce入门学习介绍
大家好,本人作为重庆德勤2016年的实习生,进公司实习后有幸接触到了Salesforce,通过一个多月的自学以及培训,准备和大家分享一下我的Salesforce学习之路. 一.什么是Salesforc ...
- Ubuntu 14.04(amd64)安装Oracle11g XE(x64)
下载Oracle安装包 下载地址:Oracle Database Express Edition 11g Release 2 for Linux x64 安装办法 1、建立oracle用户及属主 ad ...
- Python 爬虫3——第一个爬虫脚本的创建
在进行真正的爬虫工程创建之前,我们先要明确我们所要操作的对象是什么?完成所有操作之后要获取到的数据或信息是什么? 首先是第一个问题:操作对象,爬虫全称是网络爬虫,顾名思义,它所操作的对象当然就是网页, ...
- JS中的柯里化与反柯里化
先占个位 看了一天折资料,感觉清楚多了
- Handlebars.js的学习
写在开头的话: 在使用Ghost搭建自己的博客的时候,发现不会Handlebars.js寸步难行,所以本人决定学习下Handlebars.js,因此在此做个记录 为什么选择Handlebars.js ...