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，一经查实，立即删除！

相关文章

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语法…
阅读更多...
（送书和红包）快人一步，掌握前端函数式编程

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

大家好，我是若川。上周末送出了3本新书和若干红包，抽奖名单已公布。本周又争取到了4本《前端函数式编程》书籍包邮送给大家，抽奖规则见文末，与以往不同的是除了关键词、留言、在看抽奖外，还有最早关注奖，欢…
阅读更多...
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"…
阅读更多...
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;分布式系…
阅读更多...
前端进阶必备Node.js，你得了解一下

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

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

Web Components 上手指南

现在的前端开发基本离不开 React、Vue 这两个框架的支撑&#xff0c;而这两个框架下面又衍生出了许多的自定义组件库&#xff1a;Element&#xff08;Vue&#xff09;Ant Design&#xff08;React&#xff09;这些组件库的出现&#xff0c;让我们可以直接使用已经封装好的组件&…
阅读更多...
如何远程连接Windows和linux服务器

如何远程连接Windows和linux服务器

linux的方法在下面 Windows服务器远程连接 登录控制台查看服务器系统是什么系统例如阿里云的ECS服务器 Windows系统可以使用微软自带的远程工具进行连接&#xff0c;可以连接的系统有Windows server 和Windows 7-10 等等系列&#xff1b;Windows系统&#xff0c;例如Windows10系…
阅读更多...
手把手教你接入前端热门抓包神器 - whistle

手把手教你接入前端热门抓包神器 - whistle

大家好&#xff0c;我是若川&#xff0c;今天推荐腾讯前端团队的这篇好文。whistle 是一个基于 Node.js 的跨平台网络调试工具。最近随着 Nohost 的开源&#xff0c;有不少同学问了 whistle 相关的问题&#xff0c;本篇文章将结合几个常见的业务场景介绍如何在本地前端项目开发…
阅读更多...
React 与 Vue 框架的设计思路大 PK

React 与 Vue 框架的设计思路大 PK

大家好&#xff0c;我是若川。今天分享一篇框架设计思路的好文。关于我 大家好我是花果山的大圣&#xff0c;今天很荣幸&#xff0c;有机会跟大家分享一下很多年轻人感兴趣的话题《 Vue 和 React 设计思想 PK》,个人水平有限&#xff0c;如果有理解不到位的请倾盆&#xff0c;大…
阅读更多...
php foreach id是否存在数组_请纠正这 5 个 PHP 编码小陋习

php foreach id是否存在数组_请纠正这 5 个 PHP 编码小陋习

在做过大量的代码审查后&#xff0c;我经常看到一些重复的错误&#xff0c;以下是纠正这些错误的方法。在循环之前测试数组是否为空$items [];// ...if (count($items) > 0) {foreach ($items as $item) {// process on $item ...}}foreach以及数组函数 (array_*) 可以处理…
阅读更多...
1161转进制（C语言）

1161转进制（C语言）

一&#xff1a;题目 二&#xff1a;思路分析 1.首先该题目让我们使用递归求十进制转其他进制 2.其次&#xff0c;我们要知道十进制转换为其他进制怎么转换&#xff0c;以例题所给的数据为例 由此图可以看出&#xff0c;十进制转换为其他进制&#xff0c;是辗转相除法&#xf…
阅读更多...
应对无协议脱欧 葡萄牙机场将为英籍旅客设快速通道

应对无协议脱欧 葡萄牙机场将为英籍旅客设快速通道

中新网1月18日电 据台湾《联合报》援引英媒报道&#xff0c;英国首相特蕾莎•梅的脱欧协议遭下院否决后&#xff0c;英国无协议脱欧的可能性变大。葡萄牙总理科斯塔17日表示&#xff0c;里斯本当局正对机场开设特殊通道进行规划&#xff0c;使英国旅客无论英国最后如何脱欧&…
阅读更多...
6轮字节前端校招面试经验分享

6轮字节前端校招面试经验分享

大家好&#xff0c;我是若川。最近金三银四&#xff0c;今天分享一篇字节前端校招面试经验的轻松好文&#xff0c;相信看完会有所收获。也欢迎点击下方卡片关注或者星标我的公众号若川视野因为我错过了2020年的秋招&#xff08;ps: 那时候连数据结构与算法都还没学完&#xff0…
阅读更多...
斥资近1亿港元，小米二次回购

斥资近1亿港元，小米二次回购

1月21日消息&#xff0c;小米集团发布公告称&#xff0c;公司于1月18日回购了984.96万股B类普通股股票&#xff0c;占已发行股份0.041%&#xff0c;平均价为每股B类股10.1527港元&#xff0c;总计斥资近1亿港元。 这也是继1月17日首次回购后&#xff0c;小米集团连续两日出手进…
阅读更多...
ios macos_设计师可以从iOS 14和macOS Big Sur中学到什么？

ios macos_设计师可以从iOS 14和macOS Big Sur中学到什么？

ios macos重点 (Top highlight)With the introduction of iOS 14 and macOS Big Sur, we are the witness of the next big thing in UI Design. Changes are not so revolutionary like in iOS 7 years before, but they undoubtedly present the trend UI Designers will fol…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023