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

最新推荐文章于 2024-06-27 12:41:50 发布
最新推荐文章于 2024-06-27 12:41:50 发布
阅读量3.4w 收藏 64
点赞数 11
分类专栏： CSS 文章标签： 图形 css3 梯形 三角 平行四边形

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

扩展阅读：

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

那么今天就说到这里了，如果大家有更多的效果制作方法，请在下面的评论中分享。

如需转载烦清注明出处：W3CPLUS


༺ཌༀཉི浮华背后༃ༀད༻
关注
  • 11
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS画流程图的圆角菱形，完美解决
fzj_Unicorn的博客
11-23 2347
CSS画圆角扁菱形。外层正方形div旋转45deg得到基础菱形，倾斜得到扁的菱形，内层span反倾斜，得到正常字体，在旋转回来。
css实现梯形
qq_46595660的博客
08-07 4081
css实现梯形
html3D元素示例
最新发布
2401_83334819的博客
06-27 281
body{div {.box1 {*/.box2 {</style></div>
css3绘制三角形
天下大师傅
07-20 474
以前做类似消息提示框指示方向的这种需求需要css配合图片才能做，现在只需要直接用css3就可以了。 这是运行效果图 这是完整代码 *{margin: 0; padding: 0;} .container{ margin: 0 auto;
css 梯形的三种实现方法
weixin_42371145的博客
11-25 8686
转自：https://blog.csdn.net/ChenXvYuan_001/article/details/85016836 https://www.cnblogs.com/linsinan/p/6928734.html 1 利用border加粗方式 这是网上较为常见的方式，其原理就是对一个高度为0px的正方形的div的border-top进行增粗。 HTML: <div class="...
css实现一个梯形
sushaning的博客
05-25 5608
尝试用css实现一个梯形标签页 1.通过3D形变来实现 试想在现实的三维世界中旋转一个矩形。由于透视的关系，我们最终看到的二维图像往往就是一个梯形！因此，我们可以在CSS 中用3D 旋转 来模拟出这个效果： .wrap { width: 100%; height: 100%; } .tab { width: 300px; height: 80px; position: relative; margin: 100px auto; font-s
CSS 实现平行四边形、菱形、切角效果、梯形
sinat_33255495的博客
06-06 4181
我们可以通过 skew() 的变形属性将矩形进行斜向拉伸： 实现效果： 需要注意的是： 如果要把这个效果应用到行内元素，需要把 display 属性设置为: inline-block 或 block
CSS3 画基本图形，圆形、椭圆形、三角形等
09-27
在CSS3中，绘制基本图形是一项非常实用的功能，它允许开发者使用纯CSS创建各种形状，如圆形、椭圆形、三角形、平行四边形、梯形、六角星以及五角星等，无需借助图像编辑软件。下面我们将详细介绍如何利用CSS3实现...
CSS制作箭头图标代码(圆，三角形，椭圆)
09-24
css3功能非常强大，之前需要图片完成的icon，现在我们只需要几段css代码就可以实现此功能。下面给大家分享纯css制作的圆，椭圆，三角形箭头图标，非常使用，需要的朋友参考下吧
bulma-css:Bulma CSS-开源组件| 应用种子
05-24
Bulma Css带有18种以上完全编码CSS元素和布局。 实时代码编辑器 Bulma-css包含一个实时代码编辑器，用于更改组件代码并实时查看修改。 暗模式 大多数组件都以明暗版本实现。 文献资料 有关文档，请访问Bulma ...
CSS3制作圆角、椭圆、梯形带图标的不规则按钮.rar
07-10
HTML5 CSS3制作的带图标的不规则按钮，这些不规则的形状其实是有规则的，像圆角、椭圆、梯形等，只不过是印象中比矩形的按钮稍微些，但是这些按钮应用在网页上，感觉很有个性哦，让人眼前一亮的感觉，按钮是带有图标...
Tuesday|带22种动画效果的小巧的CSS3动画库
12-13
Tuesday是一款带22种效果的小巧的CSS3动画库。目前网络上已经有多种好用的CSS动画库插件，这款CSS3动画库的特点是动画路径短，动画持续时间也较短。目前该动画库提供了22种不同的元素进入和离开的动画效果。
【CSS】实现梯形
流萤梦的博客
04-09 2885
简单说一下背景，就是需要实现一个展开收起的按钮。那我第一个想到的方法，可不就是border自己画嘛。
css实现菱形
会飞的咕咕鱼的博客
11-22 1390
<i></i> i{ display: inline-block; border-color: #AFAFAF; border-style: solid; border-width: 2px; width: 0; height: 0; margin-right: 7px; position: relati...
css如何画一个梯形
weixin_35749796的博客
12-26 2590
要用 CSS 画一个梯形，你可以使用伪元素和 CSS 三角形。 首先，你需要在 HTML 中创建一个空的容器元素，比如一个 div。然后，在 CSS 中为该元素添加两个伪元素，使用 ::before 和 ::after。 接下来，你需要为这两个伪元素设置宽度和高度，并将它们的背景色设为你想要的颜色。 最后，你需要使用 CSS 三角形的方法，将这两个伪元素旋转到正确的角度，以形成梯形的效果。 例如，...
【CSS 画个梯形】
前端-CV全粘工程师
08-24 2658
是CSS的属性之一，用于裁剪元素的形状。它可以通过定义一个具有多边形顶点坐标的值来创建一个多边形的裁剪区域，从而实现元素的非矩形裁剪效果。其中多边形顶点坐标可以按照顺时针或逆时针顺序设置，坐标以百分比或像素为单位。因此，可以根据具体的需求选择不同的裁剪方式。还支持其他的形状裁剪方式，例如。
CSS:两种方式画一个梯形
热门推荐
止水
12-15 2万+
在html网页设计中，常会结合css绘制一些简单的形状，当然除简单的矩形之外，最近在网页设计过程中，我遇到了要画一个梯形的需求，经过学习之后，总结两种方式画一个梯形，这里只是针对梯形，其他情况另作参考。 利用border 利用 这是网上较为常见的方式，其原理就是对一个高度为0px的正方形的div的border-top进行增粗。 理解方式： 理解代码： 建立一个div,高度为0,宽度400p...
纯css写出菱形图案
Zzhwkpd的博客
02-16 569
.arrow{ width: 120px; height: 40px; /* border:1px solid #000; */ position: relative; } .arrow::before{ content:''; position: absolute; width: 80%; height: 50%; /* background: red; */ left:50%; transform: skewX(45deg) translateX(-50%).
css空心三角形_纯CSS+HTML制作三角形和圆|实心+空心
06-03
您好！关于制作纯CSS的空心三角形和圆，可以参考以下代码示例： 空心三角形： ``` <div class="triangle"></div> <style> .triangle { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid #000; } </style> ``` 实心三角形： ``` <div class="triangle"></div> <style> .triangle { width: 0; height: 0; border-top: 50px solid #000; border-right: 50px solid transparent; border-left: 50px solid transparent; } </style> ``` 空心圆： ``` <div class="circle"></div> <style> .circle { width: 50px; height: 50px; border: 2px solid #000; border-radius: 50%; } </style> ``` 实心圆： ``` <div class="circle"></div> <style> .circle { width: 50px; height: 50px; background-color: #000; border-radius: 50%; } </style> ``` 希望对您有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值