CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

转载链接：http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet


前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单，方便大家急用时有地方可查。别的不多说了，直接看代码。

为了节省时间，下面图形都采用的一个标签，可以是块元素也可以是行内元素，不过行内元素需要加上“display:block;”，唯一不同的是，在此用了不同的类名来区别，相关类名我放在了标题的后面，以便大家对应查看。

1、正方形（square）：

CSS Code:

.square {width: 100px;height:100px;background: #E5C3B2;
}

上面的方法是，设置宽度和高度一致就可以实现正方形的效果，下面展示一种boder制作正方形的效果：

.square {width:0;height:0;border: 50px solid  #E5C3B2;/*边框大小等于正方形宽度（或高度）的一半*/
}

效果：

2、平行四边形（parallelogram）

CSS Code:

.parallelogram {width: 100px;height: 70px;-webkit-transform: skew(20deg);-moz-transform: skew(20deg);-o-transform: skew(20deg);-ms-transform: skew(20deg);transform: skew(20deg);background: #E5C3B2;
}

效果：

我们可以通过“skew”的值大小来控制角度，如果其值为负值，将会改变扭曲方向：

.parallelogram2 {width:100px;height:70px;-webkit-transform:skew(-20deg);-moz-transform:skew(-20deg);-o-transform:skew(-20deg);-ms-transform:skew(-20deg);transform:skew(-20deg);background:#E5C3B2;
}

效果：

3、菱形(diamond)

CSS Code:

.diamond {
width:80px;
height:80px;
margin:40px 0 0 40px;
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-o-transform-origin:0 100%;
-ms-transform-origin:0 100%;
transform-origin:0 100%;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
background:#E5C3B2;
}

效果：

4、长方形（）

CSS Code:

.rectangle {width:100px;height:50px;background:#E5C3B2;
}


效果：

5、梯形（trapezoid）

梯形一

CSS Code:

.trapezoid-1 {height:0;width:100px;border-bottom:100px solid #e5c3b2;border-left:60px solid transparent;border-right:60px solid transparent;
}

效果：

梯形二

CSS Code:

.trapezoid-2 {height:0;width:100px;border-top:100px solid #e5c3b2;border-left:60px solid transparent;border-right:60px solid transparent;
}

效果：

梯形三

CSS Code:

.trapezoid-3 {height:100px;width:0;border-right:100px solid #e5c3b2;border-top:60px solid transparent;border-bottom:60px solid transparent;
}

效果：

梯形四

CSS Code:

.trapezoid-4 {height:100px;width:0;border-left:100px solid #e5c3b2;border-top:60px solid transparent;border-bottom:60px solid transparent;
}

效果：

6、三角形（triangle）

三角形朝上

CSS Code:

.triangle-up {height:0;width:0;border:50px solid #e5c3b2;border-color:transparent transparent #e5c3b2 transparent;
}

效果：

三角朝右

CSS Code:

.triangle-rihgt {height:0;width:0;border:50px solid #e5c3b2;border-color:transparent  transparent transparent #e5c3b2;
}

效果：

三角朝下

CSS Code:

.triangle-down {height:0;width:0;border:50px solid #e5c3b2;border-color:#e5c3b2 transparent  transparent transparent;
}

效果：

三角朝左

CSS Code:

.triangle-left {height:0;width:0;border:50px solid #e5c3b2;border-color:transparent #e5c3b2 transparent transparent;
}

效果：

7、半圆（semicircle）

上半圆

CSS Code:

.semicircle-top {background:#e5c3b2;height:25px;width:50px;-moz-border-radius:50px 50px 0 0;-webkit-border-radius:50px 50px 0 0;border-radius:50px 50px 0 0;
}

效果：

右半圆

CSS Code:

.semicircle-right {background:#e5c3b2;height:50px;width:25px;-moz-border-radius:0 0px 50px 0;-webkit-border-radius:0 50px 50px 0;border-radius:0 50px 50px 0;
}

效果：

下半圆

CSS Code:

.semicircle-down {background:#e5c3b2;height:25px;width:50px;-moz-border-radius:0 0 50px 50px;-webkit-border-radius:0 0 50px 50px;border-radius:0 0 50px 50px;
}

效果：

左半圆

CSS Code:

.semicircle-left {background:#e5c3b2;height:50px;width:25px;-moz-border-radius:50px 0 0 50px;-webkit-border-radius:50px 0 0 50px;border-radius:50px 0 0 50px;
}

效果：

8、圆（circle）

CSS Code:

.circle {background:#e5c3b2;height:50px;width:50px;-moz-border-radius:25px;-webkit-border-radius:25px;border-radius:25px;
}

效果：

9、椭圆（oval）

水平椭圆

CSS Code:

.ovalHor {background:#e5c3b2;height:40px;width:80px;-moz-border-radius:40px/20px;-webkit-border-radius:40px/20px;border-radius:40px/20px;
}

效果：

垂直椭圆

CSS Code:

.ovalVert {background:#e5c3b2;height:80px;width:40px;-moz-border-radius:20px/40px;-webkit-border-radius:20px/40px;border-radius:20px/40px;
}

效果：

10、表图（chartColorful）

CSS Code:

.chartColorful {height:0px;width:0px;border:50px solid red;border-color:purple red yellow orange;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;
}

效果：

11、四分之一圆（quarterCircle）

四分之一圆（上）

CSS Code:

.quarterCircleTop {background:#e5c3b2;height:50px;width:50px;-moz-border-radius:50px 0 0 0;-webkit-border-radius:50px 0 0 0;border-radius:50px 0 0 0;
}

效果：

四分之一圆（右）

CSS Code:

.quarterCircleRight {background:#e5c3b2;height:50px;width:50px;-moz-border-radius:0 50px 0 0;-webkit-border-radius:0 50px 0 0;border-radius:0 50px 0 0;
}

效果：

四分之一圆（下）

CSS Code:

.quarterCircleBottom {background:#e5c3b2;height:50px;width:50px;-moz-border-radius:0  0 50px 0;-webkit-border-radius:0  0 50px 0;border-radius:0  0 50px 0;
}

效果：

四分之一圆（左）

CSS Code:

.quarterCircleLeft {background:#e5c3b2;height:50px;width:50px;-moz-border-radius:0  0 0 50px;-webkit-border-radius:0  0 0 50px;border-radius:0  0 0 50px;
}

效果：

12、Chart（quarterCircle）

Chart（上）

CSS Code:

.chartTop {height:0px;width:0px;border:50px solid #e5c3b2;border-top-color:transparent;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;
}

效果：

Chart（右）

CSS Code:

.chartRight {height:0px;width:0px;border:50px solid #e5c3b2;border-right-color:transparent;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;
}

效果：

Chart（下）

CSS Code:

.chartBottom {
height:0px;
width:0px;
border:50px solid #e5c3b2;
border-bottom-color:transparent;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
}

效果：

Chart（左）

CSS Code:

.chartLeft {height:0px;width:0px;border:50px solid #e5c3b2;border-left-color:transparent;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;
}

效果：

13、心形（heart）

左心形

CSS Code

.heartLeft {width:0;height:0;border-color:red;border-style:dotted;border-width:0 40px 40px 0;
}

效果：

右心形

CSS Code

.heartRight {width:0;height:0;border-color:red;border-style:dotted;border-width:0  0 40px 40px;
}

效果：

14、彩带（ribbon）

CSS Code

.ribbon {width:0;height:100px;border-left:50px solid red;border-right:50px solid red;border-bottom:35px solid transparent
}

效果：

上面就用CSS制作的32种图形效果，当然大家还可以发挥你的想像和创造，制作一些更精美的图形。

扩展阅读：

  1. The Shapes of CSS
  2. Drawing with CSS3 Tips & little more
  3. 纯CSS制作的图形效果

那么今天就说到这里了，如果大家有更多的效果制作方法，请在下面的评论中分享。

如需转载烦清注明出处：W3CPLUS


本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/276155.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vue-cli新建的项目webpack设置涉及的大部分插件整理

vue-cli新建的项目webpack设置涉及的大部分插件整理

portfinder 用来检测未占用的端口更多看这里: https://www.npmjs.com/package/portfinder webpack-merge 用来合并多个webpack设置，也可以合并对象更多看这里: https://www.npmjs.com/package/friendly-errors-webpack-plugin html-webpack-plugin 将html复制并插入…
阅读更多...
yaml加配置文件后起不来_YAML配置文件管理资源

yaml加配置文件后起不来_YAML配置文件管理资源

YAML是配置文件的格式，YAML文件中是由一些易读的字段和指令组成的。K8S使用YAML配置文件需要注意如下事项。定义配置时，指定最新稳定版API(当前最新稳定版是v1版本)。最新版本的API可以通过kubectl api-versions命令进行查看，命令如下所示。前…
阅读更多...
html5/css3响应式布局介绍

html5/css3响应式布局介绍

转载链接：http://www.51xuediannao.com/htmlcss/htmlcssjq/694.html html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程，利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询…
阅读更多...
人际关系十大要诀

人际关系十大要诀

【一表人才】 所谓“一表人才”，就是说当你与陌生人第一次见面时给对方留下的第一印象，我们都知道第一印象很重要，要给对方留下好的印象，特别是要让对方在最短的时间记住你。那么我们自身的仪表、行为举止都很重要；我们…
阅读更多...
MobX 上手指南，写 Vue 的感觉？

MobX 上手指南，写 Vue 的感觉？

之前用 Redux 比较多，一直听说 Mobx 能让你体验到在 React 里面写 Vue 的感觉，今天打算尝试下 Mobx 是不是真的有写 Vue 的感觉。题外话在介绍 MobX 的用法之前，先说点题外话，我们可以看一下 MobX 的中文简介。在 MobX 的中文网站…
阅读更多...
ansible中yaml语法应用

ansible中yaml语法应用

4、yaml语法应用 ansible的playbook编写是yaml语言编写，掌握yaml语法是编写playbook的必要条件，格式要求和Python相似，具体教程参考如下yaml语言教程 附上一个yaml文件转js格式文件链接在线免费yaml内容转json格式 4.1、 ansible中的yaml语法…
阅读更多...
中兴a2018拆机图片_中兴天机拆机步骤详解【图文】

中兴a2018拆机图片_中兴天机拆机步骤详解【图文】

中兴天机上市时有两款，黑色和白色。黑色的缺点是外观过于传统，并不是很适合年轻人使用，但是其推出白色款却很好的解决了这个问题。中兴天机的整体性质与性价比完美的拼过了 小米 3等同时上线的手机产品。中兴天机价格在1799左右，小…
阅读更多...
网络视频贴片广告全面推行第三方监测

网络视频贴片广告全面推行第三方监测

视频网站优酷与国际调研机构尼尔森联合对外宣布：针对优酷视频贴片广告全面推行第三方监测。这是视频行业首次倡导广告投放数据透明化的一大举措。　　近年来，网络视频已经成为广告主营销的一大选择。随着广告主投放额度不断加大，广告主对视频…
阅读更多...
css3动画事件—webkitAnimationEnd

css3动画事件—webkitAnimationEnd

转载链接：http://www.jb51.net/css/72443.html 用css3的animation完成一个动画，当只有这个动画完成时才执行令一个事件，比如让动画保持在终止的状态或其他一些事件。我们该怎么办呢。 第一种方法： 用计时器，设定一个…
阅读更多...
（送书和红包）快人一步，掌握前端函数式编程

（送书和红包）快人一步，掌握前端函数式编程

大家好，我是若川。上周末送出了3本新书和若干红包，抽奖名单已公布。本周又争取到了4本《前端函数式编程》书籍包邮送给大家，抽奖规则见文末，与以往不同的是除了关键词、留言、在看抽奖外，还有最早关注奖，欢…
阅读更多...
js split参数为无效字符_js使用split函数按照多个字符对字符串进行分割的方法

js split参数为无效字符_js使用split函数按照多个字符对字符串进行分割的方法

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":5,"count":5}]},"card":[{"des":"阿里云函数计算(Function Compute)是一个事件…
阅读更多...
Windows下访问VirtualBox的mysql服务

Windows下访问VirtualBox的mysql服务

由于好长时间没有在windows下使用mysql，现在出现好多选项，而且使用sqlyog连接总是出现1045错误，所以在虚拟机Ubuntu下安装mysql进行访问，但是想用win下面vscode进行开发，就有了Windows下访问VirtualBox的mysql服务的想…
阅读更多...
JavaScript操作表格进行拖拽排序

JavaScript操作表格进行拖拽排序

<js-dodo-table- Drag and Drop JQuery plugin>以上插件可对table进行排序&#xff0c;拖动&#xff01; 例如有下面一个样子的id为table的表格&#xff1a; <table id"table"cellspacing"0"cellpadding"2"><tr id"1"…
阅读更多...
UBUNTU 用户及用户组管理 修改用户和主机名

UBUNTU 用户及用户组管理 修改用户和主机名

转载链接&#xff1a;http://blog.sina.com.cn/s/blog_66439a3e0101dm1g.html 一、用户及用户组管理 创建组&#xff1a; $sudo addgroup ccache 创建用户&#xff1a; $sudo useradd ccache -g ccache -M 创新wfz用户并创建HOME目录&#xff0c;指定用户组为ccache $sudo u…
阅读更多...
ping -a 获取不到主机名_网络测试命令——PING

ping -a 获取不到主机名_网络测试命令——PING

命令功能&#xff1a;Linux系统和windows系统的ping命令是常用的网络命令&#xff0c;它通常用来测试与目标主机的连通性&#xff0c;这样我们就可以根据它ping输出的信息来确定目标主机是否可访问(但这不是绝对的)。有些服务器为了防止通过ping探测到&#xff0c;通过防火墙设…
阅读更多...
写在2021: 值得关注/学习的前端框架和工具库

写在2021: 值得关注/学习的前端框架和工具库

前言最近在知乎看到了这么个问题&#xff1a;学完Vue还有必要学习React和Node吗&#xff1f;[1]&#xff0c; 有很奇妙的感觉&#xff0c;因为我在最开始入门前端时&#xff0c;也是以Vue入的门&#xff0c;在“学完”Vue之后&#xff0c; 我也有了这个疑问&#xff0c;但当时的…
阅读更多...
万物互联之~RPC专栏

万物互联之~RPC专栏

3.RPC引入 上篇回顾&#xff1a;万物互联之~深入篇 Code&#xff1a;https://github.com/lotapp/BaseCode/tree/master/python/6.net/6.rpc/ 其他专栏最新篇&#xff1a;协程加强之~兼容答疑篇 | 聊聊数据库~SQL环境篇 3.1.概念 RPC(Remote Procedure Call)&#xff1a;分布式系…
阅读更多...
python判断字符大小写转换_Python 字符串大小写转换的简单实例

python判断字符大小写转换_Python 字符串大小写转换的简单实例

①所有字母都转换为大写# -*- coding:utf-8 -*-if __name__ "__main__":a hello, world!print(a.upper())输出&#xff1a;HELLO, WORLD!②所有字母都转换为小写# -*- coding:utf-8 -*-if __name__ "__main__":a HELLO, WORLD!print(a.lower())输出&am…
阅读更多...
正则表达式如何匹配正反斜杠

正则表达式如何匹配正反斜杠

转载链接&#xff1a;http://wiki.ubuntu.org.cn/Python%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%93%8D%E4%BD%9C%E6%8C%87%E5%8D%97#.E5.8F.8D.E6.96.9C.E6.9D.A0.E7.9A.84.E9.BA.BB.E7.83.A6 反斜杠的麻烦 在早期规定中&#xff0c;正则表达式用反斜杠字符 ("…
阅读更多...
前端进阶必备Node.js，你得了解一下

前端进阶必备Node.js，你得了解一下

作为前端开发&#xff0c;工作中肯定离不开 JavaScript &#xff0c;而 Node.js 是基于 JavaScript 语言和 V8 引擎的 Web 服务器项目&#xff0c;让你可以直接使用 JavaScript 来搭架服务器。而且在 Node 环境下&#xff0c;通过模块化的 JavaScript 代码&#xff0c;加上函数…
阅读更多...
最新文章

Copyright @ 2022~2023