在写网页的过程,必不可免的会碰到网站需要装饰一些几何图形;
实现的方式无非四种:
1. 图片
2. CSS2.1&3
3. SVG
4. Canvas
就我个人而言,对于一些常见的几何图形.
- 图片是不推荐的[太占资源,也不利于维护]
- CSS是比较推荐的,精简且方便维护
- SVG也是一个很好的选择[学习成本高一点点]
- Canvas看情况使用
.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); }
查看全部实例及代码请访问:https://github.com/Cutepingping/HTML5-CSS/blob/master/CSS/myShapes.html
部分效果图如下:
图: