分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > 代码编程

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

发布时间：2023-09-06 01:43责任编辑：赖小花关键词：CSS

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

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

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

1、正方形（square）：

CSS Code:

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

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

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

效果：

2、平行四边形（parallelogram）

CSS Code:

[css]view plaincopy
  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 plaincopy
  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 plaincopy
  1. .diamond{
  2. width:80px;
  3. height:80px;
  4. margin:40px0040px;
  5. -webkit-transform-origin:0100%;
  6. -moz-transform-origin:0100%;
  7. -o-transform-origin:0100%;
  8. -ms-transform-origin:0100%;
  9. transform-origin:0100%;
  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 plaincopy
  1. .rectangle{
  2. width:100px;
  3. height:50px;
  4. background:#E5C3B2;
  5. }


效果：

5、梯形（trapezoid）

梯形一

CSS Code:

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

效果：

梯形二

CSS Code:

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

效果：

梯形三

CSS Code:

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

效果：

梯形四

CSS Code:

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

效果：

6、三角形（triangle）

三角形朝上

CSS Code:

[css]view plaincopy
  1. .triangle-up{
  2. height:0;
  3. width:0;
  4. border:50pxsolid#e5c3b2;
  5. border-color:transparenttransparent#e5c3b2transparent;
  6. }

效果：

三角朝右

CSS Code:

[css]view plaincopy
  1. .triangle-rihgt{
  2. height:0;
  3. width:0;
  4. border:50pxsolid#e5c3b2;
  5. border-color:transparenttransparenttransparent#e5c3b2;
  6. }

效果：

三角朝下

CSS Code:

[css]view plaincopy
  1. .triangle-down{
  2. height:0;
  3. width:0;
  4. border:50pxsolid#e5c3b2;
  5. border-color:#e5c3b2transparenttransparenttransparent;
  6. }

效果：

三角朝左

CSS Code:

[css]view plaincopy
  1. .triangle-left{
  2. height:0;
  3. width:0;
  4. border:50pxsolid#e5c3b2;
  5. border-color:transparent#e5c3b2transparenttransparent;
  6. }

效果：

7、半圆（semicircle）

上半圆

CSS Code:

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

效果：

右半圆

CSS Code:

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

效果：

下半圆

CSS Code:

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

效果：

左半圆

CSS Code:

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

效果：

8、圆（circle）

CSS Code:

[css]view plaincopy
  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 plaincopy
  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 plaincopy
  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 plaincopy
  1. .chartColorful{
  2. height:0px;
  3. width:0px;
  4. border:50pxsolidred;
  5. border-color:purpleredyelloworange;
  6. -moz-border-radius:50px;
  7. -webkit-border-radius:50px;
  8. border-radius:50px;
  9. }

效果：

11、四分之一圆（quarterCircle）

四分之一圆（上）

CSS Code:

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

效果：

四分之一圆（右）

CSS Code:

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

效果：

四分之一圆（下）

CSS Code:

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

效果：

四分之一圆（左）

CSS Code:

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

效果：

12、Chart（quarterCircle）

Chart（上）

CSS Code:

[css]view plaincopy
  1. .chartTop{
  2. height:0px;
  3. width:0px;
  4. border:50pxsolid#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 plaincopy
  1. .chartRight{
  2. height:0px;
  3. width:0px;
  4. border:50pxsolid#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 plaincopy
  1. .chartBottom{
  2. height:0px;
  3. width:0px;
  4. border:50pxsolid#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 plaincopy
  1. .chartLeft{
  2. height:0px;
  3. width:0px;
  4. border:50pxsolid#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 plaincopy
  1. .heartLeft{
  2. width:0;
  3. height:0;
  4. border-color:red;
  5. border-style:dotted;
  6. border-width:040px40px0;
  7. }

效果：

右心形

CSS Code

[css]view plaincopy
  1. .heartRight{
  2. width:0;
  3. height:0;
  4. border-color:red;
  5. border-style:dotted;
  6. border-width:0040px40px;
  7. }

效果：

14、彩带（ribbon）

CSS Code

[css]view plaincopy
  1. .ribbon{
  2. width:0;
  3. height:100px;
  4. border-left:50pxsolidred;
  5. border-right:50pxsolidred;
  6. border-bottom:35pxsolidtransparent
  7. }

效果：

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

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

原文地址：https://www.cnblogs.com/gluncle/p/8483749.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved