devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]_长方形的效果图,它的css的样式可能是

作者：小小林熬夜学编程 | 2024-02-16 21:48:38

赞

踩

长方形的效果图,它的css的样式可能是

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

扩展阅读：

  1. The Shapes of CSS
  2. Drawing with CSS3 Tips & little more
  3. 纯CSS制作的图形效果
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/96991
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号