admin 管理员组文章数量: 894198
CSS绘制常见的几何图形
题外话
在写网页的过程,必不可免的会碰到网站需要装饰一些几何图形;
实现的方式无非四种:
- 图片
- CSS2.1&3
- SVG
- 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
这些来做一些奇形怪状的,比如五角星,六边形等等;
本文标签: CSS绘制常见的几何图形
版权声明:本文标题:CSS绘制常见的几何图形 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1688192434h190278.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论