您的位置：首页 > Web前端 > CSS

CSS绘制常见的几何图形

2016-02-02 14:48 686 查看

题外话

在写网页的过程,必不可免的会碰到网站需要装饰一些几何图形;

实现的方式无非四种:

1. 图片

2. CSS2.1&3

3. SVG

4. Canvas

就我个人而言,对于一些常见的几何图形.

- 图片是不推荐的[太占资源,也不利于维护]

- CSS是比较推荐的,精简且方便维护

- SVG也是一个很好的选择[学习成本高一点点]

- Canvas看情况使用

效果图

代码

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>CSS制作几何图形</title>
<style type="text/css" media="screen">
.wrapper {
width: 25%;
padding: 10x;
float: left;
height: 300px;
text-align: center;
}
/*方形没啥好讲的*/

.square {
width: 200px;
height: 200px;
background: #fed3ca;
box-sizing: border-box;
}
/*长方形也没啥好讲的*/

.retangle {
width: 200px;
height: 100px;
background: #2eb7ed;
}
/*圆形就用了css3的border-radius*/

.circle {
height: 200px;
width: 200px;
background: #11309B;
border-radius: 100%;
/*或者是宽高的一半,因为此处的值是半径*/
}
/*半圆这个很简单*/

.semicircle {
height: 100px;
width: 200px;
background: #D65E2A;
border-radius: 100px 100px 0 0;
}
/*
椭圆形也是用了border-radius,但是细化到XY轴的半径;
最简单的椭圆就是X轴的半径为Y轴的一半,反之亦然
*/

.oval {
width: 200px;
height: 100px;
background: #1C951A;
border-radius: 100px/50px;
/*X:100px , Y:50px;*/
}
/*
三角形也挺简单的,利用的是边框实现的
- 宽高为0,因为只需要用到border
- transparent是用来透明化的,border-color是顺时针方向,你想产生什么方向的三角形都可以控制
*/

.triangle {
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: #8D0EEE transparent transparent transparent;
}
/*梯形的原理其实和三角形大同小异,方向同样可控制
*/

.trapezoid {
width: 200px;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent transparent #6ACFEE transparent;
}
/*菱形主要用了CSS3的transform的旋转参数,支持正反方向旋转*/

.diamond {
width: 100px;
height: 100px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background: #0CCEf2;
margin-left: 90px;
margin-top: 30px;
}
/*月牙这个图形也不难,也只是微调圆的半径和阴影组合而成*/

.moon {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 #0F93AA;
}
/*叶子这个说白了还是半径的处理*/

.leaf {
width: 200px;
height: 200px;
background: rgba(0, 255, 0, .5);
box-shadow: 2px 1px 1px rgba(0, 0, 0, .1);
border-radius: 3px 200px;
/*两个是参数是代表对角线, X 这个字母的样子*/
}
/*书签这个是三角的写法的小小转换*/

.bookmark {
width: 0;
height: 200px;
border-left: 50px solid #A26D14;
border-right: 50px solid #A26D14;
border-bottom: 40px solid transparent;
}

/*平行四边形*/

.parallelogram{
height:100px;
width:200px;
background:#13AD6D;
-webkit-transform:skew(-20deg);
transform:skew(-20deg);
}
</style>
</head>

<body>
<div class="wrapper">
<p>正方形</p>
<div class="square"></div>
</div>
<div class="wrapper">
<p>长方形</p>
<div class="retangle"></div>
</div>
<div class="wrapper">
<p>圆形</p>
<div class="circle"></div>
</div>
<div class="wrapper">
<p>半圆</p>
<div class="semicircle"></div>
</div>
<div class="wrapper">
<p>椭圆形</p>
<div class="oval"></div>
</div>
<div class="wrapper">
<p>三角形</p>
<div class="triangle"></div>
</div>
<div class="wrapper">
<p>梯形</p>
<div class="trapezoid"></div>
</div>
<div class="wrapper">
<p>菱形</p>
<div class="diamond"></div>
</div>
<div class="wrapper">
<p>月牙</p>
<div class="moon"></div>
</div>
<div class="wrapper">
<p>叶子</p>
<div class="leaf"></div>
</div>
<div class="wrapper">
<p>书签</p>
<div class="bookmark"></div>
</div>
<div class="wrapper">
<p>平行四边形</p>
<div class="parallelogram"></div>
</div>

</body>

</html>

总结

其实还有一些几何图形可以画出来.变一个边或者一个圆角,,又是另一个图案;

也可以用CSS3的transform这些来做一些奇形怪状的,比如五角星,六边形等等;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航