CSS3新特性绘制常见图形方法介绍

来源：懂视网责编：小采时间：2020-11-27 18:52:18

CSS3新特性绘制常见图形方法介绍

CSS3新特性绘制常见图形方法介绍:前言：最近准备做一个自己的网页，设计稿中导航我准备设计成矩形，也有hover样式展示的矩形，当中一些头像等等。以前除了画圆，好像真没认真画过其他图形，今天就画画我们常见到的几个图形。在此之前我们有必要了解下什么是伪元素(和它不同的，还有一个概念叫

推荐度：

点击下载本文 文档为doc格式

导读CSS3新特性绘制常见图形方法介绍:前言：最近准备做一个自己的网页，设计稿中导航我准备设计成矩形，也有hover样式展示的矩形，当中一些头像等等。以前除了画圆，好像真没认真画过其他图形，今天就画画我们常见到的几个图形。在此之前我们有必要了解下什么是伪元素(和它不同的，还有一个概念叫

前言：最近准备做一个自己的网页，设计稿中导航我准备设计成矩形，也有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 */<p class="sanjiao"></p>

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还有另外几个特性，用的好，做出来的特效逼格还是挺高的

/* 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 */
<p class="chatBox"></p>

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 */<p class="bagua"></p>

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 */<p class="zhuanshi"></p>

CSS3里还有很多话图形的方法方式，需要你慢慢去研究，虽然很少用到，但无聊时，拿来画画，还是挺有趣的.

CSS3新特性绘制常见图形方法介绍

推荐度：

点击下载本文 文档为doc格式

标签：图形常见绘制

热门焦点

CSS3新特性绘制常见图形方法介绍

CSS3新特性绘制常见图形方法介绍

CSS3新特性绘制常见图形方法介绍

最新推荐

猜你喜欢

热门推荐