利用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

推荐阅读

utf-8
网站访问全流程解析

本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]

蜡笔小新 2024-11-12 18:13:16
utf-8
javascript分页类支持页码格式

前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]

蜡笔小新 2024-11-12 14:58:57
js
探究HTML5应用中的三种Accordion交互效果

在HTML5应用中，Accordion（手风琴，又称抽屉）效果因其独特的展开和折叠样式而广泛使用。本文探讨了三种不同的Accordion交互效果，通过层次结构优化信息展示和页面布局，提升用户体验。这些效果不仅增强了视觉效果，还提高了内容的可访问性和互动性。 ... [详细]

蜡笔小新 2024-11-04 18:09:29
list
使用 Vue 集成 iScroll 实现移动端表格横向滚动与固定列功能

使用 Vue 集成 iScroll 实现移动端表格横向滚动与固定列功能 ... [详细]

蜡笔小新 2024-10-26 12:04:20
js
网络爬虫的规范与限制

本文探讨了网络爬虫引发的问题及其解决方案，重点介绍了Robots协议的作用和使用方法，旨在为网络爬虫的合理使用提供指导。 ... [详细]

蜡笔小新 2024-11-13 15:45:41
utf-8
使用ArcGIS for Java和Flex浏览自定义ArcGIS Server 9.3地图

本文介绍了如何在Flex应用程序中实现浏览自定义ArcGIS Server 9.3发布的地图。这是一个基本的入门示例，适用于初学者。 ... [详细]

蜡笔小新 2024-11-13 14:40:13
js
解决 Windows Server 2016 网络连接问题

本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ... [详细]

蜡笔小新 2024-11-12 00:01:44
js
飞秋软件的OA消息接口服务系统

为了提升单位内部沟通效率，我们开发了一套飞秋软件与OA系统的消息接口服务系统。该系统能够将OA系统中的审批、通知等信息自动同步至飞秋平台，确保员工在使用飞秋进行日常沟通的同时，也能及时获取OA系统的各类重要信息，从而实现无缝对接，提高工作效率。 ... [详细]

蜡笔小新 2024-11-11 13:44:09
utf-8
如何将TS文件转换为M3U8直播流：HLS与M3U8格式详解

在视频传输领域，MP4虽然常见，但在直播场景中直接使用MP4格式存在诸多问题。例如，MP4文件的头部信息（如ftyp、moov）较大，导致初始加载时间较长，影响用户体验。相比之下，HLS（HTTP Live Streaming）协议及其M3U8格式更具优势。HLS通过将视频切分成多个小片段，并生成一个M3U8播放列表文件，实现低延迟和高稳定性。本文详细介绍了如何将TS文件转换为M3U8直播流，包括技术原理和具体操作步骤，帮助读者更好地理解和应用这一技术。 ... [详细]

蜡笔小新 2024-11-11 12:12:04
default
汇集开发者必备的实用参考网站与链接资源

为开发者提供了一系列实用的参考网站和资源链接，包括HTML速查手册（和），帮助开发者快速查找和学习相关技术知识。此外，还涵盖了其他重要的开发工具和文档，为编程工作提供全面支持。 ... [详细]

蜡笔小新 2024-11-08 12:23:08
default
实现DIV元素水平居中的多种技巧与方法

在面试过程中，面试官常常会提问如何使一个DIV元素实现水平和垂直居中。本文将详细介绍几种常用的实现方法。准备工作包括创建一个父容器和一个子容器，通过不同的CSS属性和技术手段，如Flexbox、Grid布局、绝对定位等，来实现DIV元素的精确居中效果。每种方法都有其适用场景和优缺点，读者可以根据具体需求选择最适合的方案。 ... [详细]

蜡笔小新 2024-11-05 13:30:24
default
Unity3D中获取游戏对象的多种实用技巧与方法

在Unity3D中，获取游戏对象有多种实用技巧和方法。除了常见的序列化变量拖拽方式外，还可以使用 `GameObject.Find()` 方法通过对象名称或路径来直接获取游戏对象。此外，`Transform.Find()` 和 `GameObject.FindWithTag()` 也是常用的手段，分别适用于通过层级结构和标签来查找游戏对象。这些方法各有优劣，开发者可以根据具体需求选择最合适的方式。 ... [详细]

蜡笔小新 2024-11-01 15:34:00
instance
期末Web开发综合实践项目：运用前端技术打造趣味小游戏体验

期末Web开发综合实践项目中，学生通过运用HTML、CSS和JavaScript等前端技术，设计并实现了一款趣味性十足的小游戏。该项目不仅检验了学生对前端基础知识的掌握情况，还提升了他们的实际操作能力和创意设计水平。视频链接展示了项目的最终成果，直观呈现了游戏的互动性和视觉效果。 ... [详细]

蜡笔小新 2024-10-31 19:04:51
fetch
PHP连接MySQL的三种方法及预处理语句防止SQL注入的技术详解

PHP连接MySQL的三种方法及预处理语句防止SQL注入的技术详解 ... [详细]

蜡笔小新 2024-10-29 16:44:38
main
利用Requests库深入解析POST请求的发送方法与实践技巧

在前一篇文章中，我们介绍了如何使用Requests库发送GET请求。本文将深入探讨如何通过Requests库发送POST请求，包括参数格式、请求封装等关键技巧，并通过“历史上的今天”API实例进行详细说明。 ... [详细]

蜡笔小新 2024-10-27 15:02:24

宝丫2502933885

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

Tags | 热门标签

RankList | 热门文章