码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2018-02-28 16:22:12      阅读：270      评论：0      收藏：0      [点我收藏+]

标签：nsf   g3d   track   span   sch   data-   ems   sbt   tar   

 

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

前面在《纯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”的值大小来控制角度，如果其值为负值，将会改变扭曲方向：

 

[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种图形效果，当然大家还可以发挥你的想像和创造，制作一些更精美的图形。

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

标签：nsf   g3d   track   span   sch   data-   ems   sbt   tar   

原文地址：https://www.cnblogs.com/gluncle/p/8483749.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！