利用css样式画各种图形初步、进阶、高级

作者：宝丫2502933885 | 来源：互联网 | 2023-09-03 13:13

利用css画图形，是个有利有弊的写法，好处是不用画图，且节省了一些流量，坏处是要写长串的css样式，而且有可能

利用css画图形&＃xff0c;是个有利有弊的写法&＃xff0c;好处是不用画图&＃xff0c;且节省了一些流量&＃xff0c;坏处是要写长串的css样式&＃xff0c;而且有可能流量并没有减少&＃xff0c;用与否视情况而定&＃xff0c;个人选择。

下面是我做测试的一些图形&＃xff0c;也是参考了一些网站&＃xff0c;简单的注解一下和归纳了一下&＃xff0c;其中并没涉及到复杂的css画图形。

其中用了css3.0的一些属性&＃xff0c;所以这里声明&＃xff1a;请用支持css3.0的浏览器看此文章&＃xff01;

正方形

矩形

梯形

平行四边形

上面这几个相对比较简单,没什么可解释的,看下面源码&＃xff1a;

/*正方形*/
.Square { width: 100px; height: 100px; background: #669; }
/*矩形*/
.rectangle { width: 200px; height: 100px; background: #669; }
/*梯形*/
.trapezoid { border-bottom: 100px solid #669; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
/*平行四边形*/
.parallelogram { width: 150px; height: 100px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); background: #669;margin-left:20px; }

向上三角

向下三角

向左三角

向右三角

左上三角

右上三角

左下上三角

右下上三角

上下三角

上面这些三角&＃xff0c;其实也很常见&＃xff0c;主要原理是利用了相邻两个边框的接壤处分配原则&＃xff0c;如果没有宽度和高度的话&＃xff0c;其实应该是四个三角形接成的矩形&＃xff0c;下面是上面图形的源码&＃xff1a;

/*三角形*/
.triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #669; }
.triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #669; }
.triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid #669; border-bottom: 50px solid transparent; }
.triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid #669; border-bottom: 50px solid transparent; }
.triangle-updown { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #669;position:relative;margin-bottom:50px}
.triangle-updown:after {content:" "; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #669;position:absolute;top:50px;left:-50px;}.triangle-topleft { width: 0; height: 0; border-top: 100px solid #669; border-right: 100px solid transparent; }
.triangle-topright { width: 0; height: 0; border-top: 100px solid #669; border-left: 100px solid transparent; }
.triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid #669; border-right: 100px solid transparent; }
.triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid #669; border-left: 100px solid transparent; }

看下面例子&＃xff0c;清楚的标明了&＃xff0c;四个边的情况&＃xff0c;上面的三角形都是利用了这个原理&＃xff0c;让不想显示的边框透明transparent&＃xff1a;

圆形

同心圆形

上半圆形

下半圆形

左半圆形

右半圆形

左上四分之一圆形

右上四分之一圆形

右下四分之一圆形

左下四分之一圆形

其实这个跟上面画三角形的原理很相似&＃xff0c;都是利用相邻边框接壤的配原则。另还主要利用了css3.0的圆角属性 border-radius 适当的调整大小会有不同的效果&＃xff01;结合border-width调整&＃xff0c;可以得到不同的图形。

当然适当的调整角度和组合&＃xff0c;可以得到更多的图形。

/*圆形主要利用了css3.0的圆角属性 border-radius 适当的调整大小会有不同的效果*/
.circle { width: 100px; height: 100px; background: #669; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
.circle-circle { width: 100px; height: 100px; border:20px solid #669;background: #fff; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; }.circle-up { width: 100px; height: 0px;border:0 solid transparent;border-top:100px solid #669;border-right:100px solid #669; -moz-border-radius: 100px 100px 0 0; -webkit-border-radius: 100px 100px 0 0; border-radius: 100px 100px 0 0; }
.circle-down { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669;border-right:100px solid #669; -moz-border-radius:0 0 100px 100px; -webkit-border-radius:0 0 100px 100px; border-radius:0 0 100px 100px; }
.circle-left { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669;border-top:100px solid #669; -moz-border-radius:100px 0 0 100px; -webkit-border-radius:100px 0 0 100px; border-radius:100px 0 0 100px; }
.circle-right { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669;border-top:100px solid #669; -moz-border-radius:0 100px 100px 0; -webkit-border-radius:0 100px 100px 0; border-radius:0 100px 100px 0; }.circle-lefttop { width: 100px; height: 0px;border:0 solid transparent;border-top:100px solid #669; -moz-border-radius:0 100px 100px 0; -webkit-border-radius:0 100px 100px 0; border-radius:100px 0 0 0; }
.circle-righttop { width: 100px; height: 0px;border:0 solid transparent;border-top:100px solid #669; -moz-border-radius:0 100px 0 0; -webkit-border-radius:0 100px 0 0; border-radius:0 100px 0 0; }
.circle-rightbottom { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669; -moz-border-radius:0 0 100px 0; -webkit-border-radius:0 0 100px 0; border-radius:0 0 100px 0; }
.circle-leftbottom { width: 100px; height: 0px;border:0 solid transparent;border-bottom:100px solid #669; -moz-border-radius:0 0 0 100px; -webkit-border-radius:0 0 0 100px; border-radius:0 0 0 100px; }

下面是适当的调整边框宽度和圆角得到的效果&＃xff1a;

左上小尾巴

右上小尾巴

右下小尾巴

左下小尾巴

/*适当的调整边框宽度和圆角得到的效果*/
.tail-lefttop{border: 0 solid transparent; border-top:30px solid #669;-moz-border-radius:100px 0 0 0;-webkit-border-radius:100px 0 0 0;border-radius:100px 0 0 0;width:100px;height:100px;}
.tail-righttop{border: 0 solid transparent; border-top:30px solid #669;-moz-border-radius:0 100px 0 0;-webkit-border-radius:0 100px 0 0;border-radius:0 100px 0 0;width:100px;height:100px;}
.tail-rightbottom{border: 0 solid transparent; border-bottom:30px solid #669;-moz-border-radius:0 0 100px 0;-webkit-border-radius:0 0 100px 0;border-radius:0 0 100px 0;width:100px;height:100px;;}
.tail-leftbottom{border: 0 solid transparent; border-bottom:30px solid #669;-moz-border-radius:0 0 0 100px;-webkit-border-radius:0 0 0 100px;border-radius:0 0 0 100px;width:100px;height:100px;}

当然可以通过上面延伸画出更多的效果比如&＃xff1a;提示泡

先看效果&＃xff1a;

提示泡

.pop{width:200px;height:100px;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;background:#669;margin-top:20px;position:relative}
.pop:after{content: "";border: 0 solid transparent; border-bottom:30px solid #669;-moz-border-radius:0 0 0 200px;-webkit-border-radius:0 0 0 200px;
border-radius:0 0 0 200px;width:50px;height:50px;position:relative;margin-top:20px;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);position:absolute;top:50px;}

上面是css实现代码&＃xff0c;基本原理又多了一项&＃xff0c;就是利用了:after伪类&＃xff0c;小尾巴上面已经介绍过了&＃xff0c;这里又利用了一个css3.0的属性transform:rotate旋转了一个角度&＃xff0c;

同时还实现了另外的一个图形--圆角矩形&＃xff0c;这是最基本radius的用法&＃xff0c;没什么可讲的。当然这里也可以延伸出另一个伪类:before画出第二个小尾巴&＃xff0c;当然也不仅限于

小尾巴&＃xff0c;上面的圆角矩形也可以换成椭圆。

下面给出实现代码&＃xff1a;

.oval-pop{width: 200px; height: 100px; background: #669; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px;margin-bottom:50px;position:relative}
.oval-pop:after{content: "";border: 0 solid transparent; border-bottom:30px solid #669;-moz-border-radius:0 0 0 200px;-webkit-border-radius:0 0 0 200px;
border-radius:0 0 0 200px;width:50px;height:50px;position:relative;margin-top:20px;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);position:absolute;top:50px;left:20px}

效果如下&＃xff1a;

椭圆提示泡

同时&＃xff0c;也给出了椭圆的实现代码。其中 border-radius: 100px / 50px; 中有一个“/” 这个符号是很少出现在css样式中的。

因为&＃xff0c;圆角有水平方向也有垂直方向&＃xff0c;所以"/"前面代表水平方向&＃xff0c;后面代表垂直方向。

于是我们又多了一个属性&＃xff0c;又多了一个发挥的方向。突然间我们发现css画图形其实就是对属性的组合创造。多试几次&＃xff0c;相信每个人都很好的掌握这个技能&＃xff01;

下面再看一个属性&＃xff0c;其实是对上面讲过的属性的一个扩展。

可以说是画圆的扩展也可以说是对圆角矩形的扩展---胶囊形&＃xff1a;

胶囊

半个胶囊

倾斜半个胶囊

下面是实现代码&＃xff0c;基本属性上面我们都利用过&＃xff0c;只是稍做调整&＃xff1a;

.capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;width:200px;height:70px;background:#669;}
.v-capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;width:80px;height:200px;background:#669}
.up-capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:70px;height:120px;
background:#669;}
.r45-capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:70px;height:120px;
background:#669;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);margin-left:20px;}
.l45-capsule{border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:70px;height:120px;
background:#669;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);margin-left:20px;}
.lr45-capsule{width:160px;height:130px;position:relative}
.lr45-capsule:before{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:#669;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);

position:absolute;left:20px;}
.lr45-capsule:after{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:#669;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);
position:absolute;left:160px;top:00px;}

细观察一下最后两个图形如果合在一起好像能组成一个心形&＃xff0c;其实就是一个心形&＃xff1a;

心形

.heart{width:160px;height:200px;position:relative}
.heart:before{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:#669;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);

position:absolute;left:20px;}
.heart:after{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:#669;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);
position:absolute;left:48px;top:0px;}

上面讲的只是对css画图形的初步认识&＃xff0c;基本上所有的实现都是对边框的角度的调整及组合。下节将会画些复杂的图形。

转文来自于&＃xff1a;穆乙 http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html

推荐阅读

io
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
io
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
io
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
io
为什么三角形与菜单背景的颜色不同？ - Why is the triangle a different colour shade to the menu background?

Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ... [详细]

蜡笔小新 2023-10-16 11:26:13
format
Material Design Lite ，简洁惊艳的前端工具箱。

2019独角兽企业重金招聘Python工程师标准MaterialDesignLite简介本文主要介绍MaterialDesign设计语言的HTMLCSSJS部分实现。对应每一 ... [详细]

蜡笔小新 2023-10-13 13:44:20
io
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
io
实例详解CSS3实现弹幕

项目需要实现弹幕，网上参考了各种方法，最后觉得transform+transition实现的效果在移动设备上性能最好，在iphone6和红米4上测试，看不到 ... [详细]

蜡笔小新 2023-10-17 12:33:46
io
动态多点××× 单云双HUB

动态多点是一个高扩展的IPSEC解决方案传统的ipsecS2S有如下劣势1.中心站点配置量大，无论是采用经典ipsec***还是采用greoveripsec多一个分支 ... [详细]

蜡笔小新 2023-10-17 09:16:50
io
css div中文字位置_超赞的 CSS 阴影技巧与细节

本文的题目是CSS阴影技巧与细节。CSS阴影，却不一定是box-shadow与filter:drop-shadow，为啥？因为使用其他属性 ... [详细]

蜡笔小新 2023-10-17 08:15:59
io
php连接mysql显示数据,php连接mysql数据库的算法思想

本文目录一览：1、怎么用php显示mysql数据表数据 ... [详细]

蜡笔小新 2023-10-16 13:24:54
io
Python爬虫_HTTP标准

文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议（超文本传输协议）是用于从WWW服务 ... [详细]

蜡笔小新 2023-10-15 14:59:43
bit
为什么borderimage在CSS中很少被使用，你可能不知道的小知识

之前我曾经写过一篇关于CSS的border-image属性的文章。现在几乎所有的现代浏览器都支持这个属性——除了IE10及以下IE版本。看起来这是一个非常 ... [详细]

蜡笔小新 2023-10-13 16:23:53
io
01mui框架使用概述

1MUI概述1.1MUI诞生背景？性能和体验的差距，一直是手机APP开发者放弃HTML5的首要原因。浏览器默认控件样式又少又丑，制作一 ... [详细]

蜡笔小新 2023-10-13 13:57:43
io
nginx 解决跨域问题 No: 'AccessControlAllowOrigin' header is present on the requested resource

错误信息：1， ... [详细]

蜡笔小新 2023-10-13 12:38:39
io
P1651 塔 (动态规划) 的最大高度计算方法

本文介绍了P1651题目的描述和要求，以及计算能搭建的塔的最大高度的方法。通过动态规划和状压技术，将问题转化为求解差值的问题，并定义了相应的状态。最终得出了计算最大高度的解法。 ... [详细]

蜡笔小新 2023-12-13 19:52:19

宝丫2502933885

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章