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种图形效果,当然大家还可以发挥你的想像和创造,制作一些更精美的图形。
CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]的更多相关文章
- css 制作圆角、圆形图形布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css制作的61种图像
HTML: <!DOCTYPE html> <html> <head> <title>css各种形状</title> <link re ...
- CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
- 【转】CSS制作图形速查表-存档
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...
- CSS3实现32种基本图形
CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...
- 160419、CSS3实现32种基本图形
CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...
- 利用CSS制作图形效果
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素.任何类型 ...
- 【01】CSS制作的图形
[01]CSS制作的图形 绘制五角星: 通过border绘制三角形.然后通过transfrom来旋转35度. 绘制对称的图形,最后绘制顶部的三角形即可. 元素本身,加上:before和:a ...
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
随机推荐
- System.Web.Mvc.ViewResultBase.cs
ylbtech-System.Web.Mvc.ViewResultBase.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, Pub ...
- JEECG-Boot 项目介绍——基于代码生成器的快速开发平台(Springboot前后端分离)
Jeecg-Boot 是一款基于代码生成器的智能开发平台!采用前后端分离架构:SpringBoot,Mybatis,Shiro,JWT,Vue&Ant Design.强大的代码生成器让前端和后 ...
- Linux 日期时间命令
cal : 显示日历 -1 显示一个月的月历 -3 显示系统前一个月,当前月,下一个月的月历 -s 显示星期天为一个星期的第一天,默认的格式 -m 显示星期一为一个星期的第一天 -j 显示在当年中 ...
- Java室内最短路径搜索(支持多楼层)
修改了上次的代码,现在支持室内的多楼层情况下的最短路径搜索,还是使用A*算法,把在GraphAdjList中VNode没有利用起来的data字段作为我们存储楼层属性的位置. 实际上是我偷懒了,正常情况 ...
- MFC编译Freetype2.3.7
从http://www.freetype.org下载源代码. FreeType2库源码包中包含多种环境与编译器下的make文件,其中还包含vc的项目文件. 我用的是VC,所以首先找到VC环境的项目文件 ...
- P1009阶乘之和
n=int(input()) ans=0 for i in range(1,n+1): t=1 for j in range(1,i+1): t*=j; ans+=t; print(ans)
- odoo 基本知识
http://127.0.0.1:8369/web/database/managerhttp://127.0.0.1:8369/web/database/selectorhttp://127.0.0. ...
- 微信小程序之组件的集合(五)
这个是学习复杂的组件的封装的,在课程中,主要实现的是书单上方的搜索功能组件的开发,这个应该是较之前的组件是有一定难度的,但是现在学到现在,感觉前端的内容和后端的内容比较起来,还是比较容易的,而且好多内 ...
- 【codeforces 507E】Breaking Good
[题目链接]:https://vjudge.net/contest/164884#problem/D [题意] 给你一张图; 图中有些路是完好的;但有些路还没修好; 先不管路有没有修好; 问你从起点到 ...
- str_replace函数的使用规则和案例详解
str_replace函数的使用规则和案例详解 str_replace函数的简单调用: <?php $str = '苹果很好吃.'; //请将变量$str中的苹果替换成香蕉 $strg = st ...