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

其他 2018-09-04 21:20:28 阅读次数: 0

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

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

1、正方形（square）：

CSS Code:

[css]  view plain  copy
  1. .square {  
  2.     width: 100px;  
  3.     height:100px;  
  4.     background: #E5C3B2;  
  5. }  

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

[css]  view plain  copy
  1. .square {  
  2.     width:0;  
  3.     height:0;  
  4.     border: 50px solid  #E5C3B2;/*边框大小等于正方形宽度（或高度）的一半*/  
  5. }  

效果：

2、平行四边形（parallelogram）

CSS Code:

[css]  view plain  copy
  1. .parallelogram {  
  2.     width: 100px;  
  3.     height: 70px;  
  4.     -webkit-transform: skew(20deg);  
  5.     -moz-transform: skew(20deg);  
  6.     -o-transform: skew(20deg);  
  7.     -ms-transform: skew(20deg);  
  8.     transform: skew(20deg);  
  9.     background: #E5C3B2;  
  10. }  

效果：

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

扫描二维码关注公众号，回复： 3055300 查看本文章
[css]  view plain  copy
  1. .parallelogram2 {  
  2.     width:100px;  
  3.     height:70px;  
  4.     -webkit-transform:skew(-20deg);  
  5.     -moz-transform:skew(-20deg);  
  6.     -o-transform:skew(-20deg);  
  7.     -ms-transform:skew(-20deg);  
  8.     transform:skew(-20deg);  
  9.     background:#E5C3B2;  
  10. }  

效果：

3、菱形(diamond)

CSS Code:

[css]  view plain  copy
  1. .diamond {  
  2.     width:80px;  
  3.     height:80px;  
  4.     margin:40px 0 0 40px;  
  5.     -webkit-transform-origin:0 100%;  
  6.     -moz-transform-origin:0 100%;  
  7.     -o-transform-origin:0 100%;  
  8.     -ms-transform-origin:0 100%;  
  9.     transform-origin:0 100%;  
  10.     -webkit-transform:rotate(-45deg);  
  11.     -moz-transform:rotate(-45deg);  
  12.     -o-transform:rotate(-45deg);  
  13.     -ms-transform:rotate(-45deg);  
  14.     transform:rotate(-45deg);  
  15.     background:#E5C3B2;  
  16. }  

效果：

4、长方形（）

CSS Code:

[css]  view plain  copy
  1. .rectangle {  
  2.     width:100px;  
  3.     height:50px;  
  4.     background:#E5C3B2;  
  5. }  


效果：

5、梯形（trapezoid）

梯形一

CSS Code:

[css]  view plain  copy
  1. .trapezoid-1 {  
  2.     height:0;  
  3.     width:100px;  
  4.     border-bottom:100px solid #e5c3b2;  
  5.     border-left:60px solid transparent;  
  6.     border-right:60px solid transparent;  
  7. }  

效果：

梯形二

CSS Code:

[css]  view plain  copy
  1. .trapezoid-2 {  
  2.     height:0;  
  3.     width:100px;  
  4.     border-top:100px solid #e5c3b2;  
  5.     border-left:60px solid transparent;  
  6.     border-right:60px solid transparent;  
  7. }  

效果：

梯形三

CSS Code:

[css]  view plain  copy
  1. .trapezoid-3 {  
  2.     height:100px;  
  3.     width:0;  
  4.     border-right:100px solid #e5c3b2;  
  5.     border-top:60px solid transparent;  
  6.     border-bottom:60px solid transparent;  
  7. }  

效果：

梯形四

CSS Code:

[css]  view plain  copy
  1. .trapezoid-4 {  
  2.     height:100px;  
  3.     width:0;  
  4.     border-left:100px solid #e5c3b2;  
  5.     border-top:60px solid transparent;  
  6.     border-bottom:60px solid transparent;  
  7. }  

效果：

6、三角形（triangle）

三角形朝上

CSS Code:

[css]  view plain  copy
  1. .triangle-up {  
  2.     height:0;  
  3.     width:0;  
  4.     border:50px solid #e5c3b2;  
  5.     border-color:transparent transparent #e5c3b2 transparent;  
  6. }  

效果：

三角朝右

CSS Code:

[css]  view plain  copy
  1. .triangle-rihgt {  
  2.     height:0;  
  3.     width:0;  
  4.     border:50px solid #e5c3b2;  
  5.     border-color:transparent  transparent transparent #e5c3b2;  
  6. }  

效果：

三角朝下

CSS Code:

[css]  view plain  copy
  1. .triangle-down {  
  2.     height:0;  
  3.     width:0;  
  4.     border:50px solid #e5c3b2;  
  5.     border-color:#e5c3b2 transparent  transparent transparent;  
  6. }  

效果：

三角朝左

CSS Code:

[css]  view plain  copy
  1. .triangle-left {  
  2.     height:0;  
  3.     width:0;  
  4.     border:50px solid #e5c3b2;  
  5.     border-color:transparent #e5c3b2 transparent transparent;  
  6. }  

效果：

7、半圆（semicircle）

上半圆

CSS Code:

[css]  view plain  copy
  1. .semicircle-top {  
  2.     background:#e5c3b2;  
  3.     height:25px;  
  4.     width:50px;  
  5.     -moz-border-radius:50px 50px 0 0;  
  6.     -webkit-border-radius:50px 50px 0 0;  
  7.     border-radius:50px 50px 0 0;  
  8. }  

效果：

右半圆

CSS Code:

[css]  view plain  copy
  1. .semicircle-right {  
  2.     background:#e5c3b2;  
  3.     height:50px;  
  4.     width:25px;  
  5.     -moz-border-radius:0 0px 50px 0;  
  6.     -webkit-border-radius:0 50px 50px 0;  
  7.     border-radius:0 50px 50px 0;  
  8. }  

效果：

下半圆

CSS Code:

[css]  view plain  copy
  1. .semicircle-down {  
  2.     background:#e5c3b2;  
  3.     height:25px;  
  4.     width:50px;  
  5.     -moz-border-radius:0 0 50px 50px;  
  6.     -webkit-border-radius:0 0 50px 50px;  
  7.     border-radius:0 0 50px 50px;  
  8. }  

效果：

左半圆

CSS Code:

[css]  view plain  copy
  1. .semicircle-left {  
  2.     background:#e5c3b2;  
  3.     height:50px;  
  4.     width:25px;  
  5.     -moz-border-radius:50px 0 0 50px;  
  6.     -webkit-border-radius:50px 0 0 50px;  
  7.     border-radius:50px 0 0 50px;  
  8. }  

效果：

8、圆（circle）

CSS Code:

[css]  view plain  copy
  1. .circle {  
  2.     background:#e5c3b2;  
  3.     height:50px;  
  4.     width:50px;  
  5.     -moz-border-radius:25px;  
  6.     -webkit-border-radius:25px;  
  7.     border-radius:25px;  
  8. }  

效果：

9、椭圆（oval）

水平椭圆

CSS Code:

[css]  view plain  copy
  1. .ovalHor {  
  2.     background:#e5c3b2;  
  3.     height:40px;  
  4.     width:80px;  
  5.     -moz-border-radius:40px/20px;  
  6.     -webkit-border-radius:40px/20px;  
  7.     border-radius:40px/20px;  
  8. }  

效果：

垂直椭圆

CSS Code:

[css]  view plain  copy
  1. .ovalVert {  
  2.     background:#e5c3b2;  
  3.     height:80px;  
  4.     width:40px;  
  5.     -moz-border-radius:20px/40px;  
  6.     -webkit-border-radius:20px/40px;  
  7.     border-radius:20px/40px;  
  8. }  

效果：

10、表图（chartColorful）

CSS Code:

[css]  view plain  copy
  1. .chartColorful {  
  2.     height:0px;  
  3.     width:0px;  
  4.     border:50px solid red;  
  5.     border-color:purple red yellow orange;  
  6.     -moz-border-radius:50px;  
  7.     -webkit-border-radius:50px;  
  8.     border-radius:50px;  
  9. }  

效果：

11、四分之一圆（quarterCircle）

四分之一圆（上）

CSS Code:

[css]  view plain  copy
  1. .quarterCircleTop {  
  2.     background:#e5c3b2;  
  3.     height:50px;  
  4.     width:50px;  
  5.     -moz-border-radius:50px 0 0 0;  
  6.     -webkit-border-radius:50px 0 0 0;  
  7.     border-radius:50px 0 0 0;  
  8. }  

效果：

四分之一圆（右）

CSS Code:

[css]  view plain  copy
  1. .quarterCircleRight {  
  2.     background:#e5c3b2;  
  3.     height:50px;  
  4.     width:50px;  
  5.     -moz-border-radius:0 50px 0 0;  
  6.     -webkit-border-radius:0 50px 0 0;  
  7.     border-radius:0 50px 0 0;  
  8. }  

效果：

四分之一圆（下）

CSS Code:

[css]  view plain  copy
  1. .quarterCircleBottom {  
  2.     background:#e5c3b2;  
  3.     height:50px;  
  4.     width:50px;  
  5.     -moz-border-radius:0  0 50px 0;  
  6.     -webkit-border-radius:0  0 50px 0;  
  7.     border-radius:0  0 50px 0;  
  8. }  

效果：

四分之一圆（左）

CSS Code:

[css]  view plain  copy
  1. .quarterCircleLeft {  
  2.     background:#e5c3b2;  
  3.     height:50px;  
  4.     width:50px;  
  5.     -moz-border-radius:0  0 0 50px;  
  6.     -webkit-border-radius:0  0 0 50px;  
  7.     border-radius:0  0 0 50px;  
  8. }  

效果：

12、Chart（quarterCircle）

Chart（上）

CSS Code:

[css]  view plain  copy
  1. .chartTop {  
  2.     height:0px;  
  3.     width:0px;  
  4.     border:50px solid #e5c3b2;  
  5.     border-top-color:transparent;  
  6.     -moz-border-radius:50px;  
  7.     -webkit-border-radius:50px;  
  8.     border-radius:50px;  
  9. }  

效果：

Chart（右）

CSS Code:

[css]  view plain  copy
  1. .chartRight {  
  2.     height:0px;  
  3.     width:0px;  
  4.     border:50px solid #e5c3b2;  
  5.     border-right-color:transparent;  
  6.     -moz-border-radius:50px;  
  7.     -webkit-border-radius:50px;  
  8.     border-radius:50px;  
  9. }  

效果：

Chart（下）

CSS Code:

[css]  view plain  copy
  1. .chartBottom {  
  2.     height:0px;  
  3.     width:0px;  
  4.     border:50px solid #e5c3b2;  
  5.     border-bottom-color:transparent;  
  6.     -moz-border-radius:50px;  
  7.     -webkit-border-radius:50px;  
  8.     border-radius:50px;  
  9. }  

效果：

Chart（左）

CSS Code:

[css]  view plain  copy
  1. .chartLeft {  
  2.     height:0px;  
  3.     width:0px;  
  4.     border:50px solid #e5c3b2;  
  5.     border-left-color:transparent;  
  6.     -moz-border-radius:50px;  
  7.     -webkit-border-radius:50px;  
  8.     border-radius:50px;  
  9. }  

效果：

13、心形（heart）

左心形

CSS Code

[css]  view plain  copy
  1. .heartLeft {  
  2.     width:0;  
  3.     height:0;  
  4.     border-color:red;  
  5.     border-style:dotted;  
  6.     border-width:0 40px 40px 0;  
  7. }  

效果：

右心形

CSS Code

[css]  view plain  copy
  1. .heartRight {  
  2.     width:0;  
  3.     height:0;  
  4.     border-color:red;  
  5.     border-style:dotted;  
  6.     border-width:0  0 40px 40px;  
  7. }  

效果：

14、彩带（ribbon）

CSS Code

[css]  view plain  copy
  1. .ribbon {  
  2.     width:0;  
  3.     height:100px;  
  4.     border-left:50px solid red;  
  5.     border-right:50px solid red;  
  6.     border-bottom:35px solid transparent  
  7. }  

效果：

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

扩展阅读：

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

猜你喜欢

转载自blog.csdn.net/HY_358116732/article/details/80115594
今日推荐
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
“开源信徒”周鸿祎开源360智脑大模型
周排行
Ubuntu 14.04 下Fuel6.0安装部署
香港一小巴侧翻致1死16伤 警方：未见机件故障
pikachu--XSS盲打
阅读 深入理解JVM虚拟机笔记一
java.sql.SQLException: ORA-00932: 数据类型不一致: 应为 -, 但却获得 CLOB
oracle delete all object under an user
[LeetCode]20 Valid Parentheses 有效的括号
树形DP求树的直径 【模板】
Context propagation over HTTP in Go
【PAT】（B）1053 住房空置率 (20)*
每日归档
更多
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022