不规则形状 前端_使用CSS3制作各种形状的图形

最新推荐文章于 2021-06-09 18:45:09 发布
最新推荐文章于 2021-06-09 18:45:09 发布
阅读量1.1k 收藏 2
点赞数
文章标签： 不规则形状 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40001634/article/details/111969439
版权
本文详细介绍了如何使用CSS3来创建一系列几何图形，包括圆形、正方形、长方形、椭圆形、三角形及其变体，还有菱形、梯形、平行四边形、星形、六角星形、五边形、八角形、心形、蛋形、无穷符号和消息提示框等复杂形状。通过这些技巧，开发者可以在网页设计中减少对图片的依赖，利用CSS3实现丰富的视觉效果。
摘要由CSDN通过智能技术生成

CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。

圆形

要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID。

圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：

#circle {

width: 120px;

height: 120px;

background: #7fee1d;

-moz-border-radius: 60px;

-webkit-border-radius: 60px;

border-radius: 60px;

}

正方形

正方形是CSS图形中最简单的图形之一，同样使用一个div，并设置一个ID。

正方形的CSS样式只需要设置相同的宽度和高度即可。

#square {

width: 120px;

height: 120px;

background: #f447ff;

}

长方形

与正方形一样，CSS长方形也非常简单：

与正方形不同的是，长方形的长度和高度为不同的值。

#rectangle {

width: 220px;

height: 120px;

background: #4da1f7;

}

椭圆形

椭圆形是正圆形的一个变体，同样使用一个带ID的div来制作。

设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：

#oval {

width: 200px;

height: 100px;

background: #e9337c;

-webkit-border-radius: 100px / 50px;

-moz-border-radius: 100px / 50px;

border-radius: 100px / 50px;

}

三角形

要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。

#triangle {

width: 0;

height: 0;

border-bottom: 140px solid #fcf921;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

}

倒三角形

与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性：

#triangle {

width: 0;

height: 0;

border-top: 140px solid #20a3bf;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

}

左三角形

左三角形操作的是border-top、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。

#triangle_left {

width: 0;

height: 0;

border-top: 70px solid transparent;

border-right: 140px solid #6bbf20;

border-bottom: 70px solid transparent;

}

右三角形

右三角形操作的是border-bottom、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。

#triangle_right {

width: 0;

height: 0;

border-top: 70px solid transparent;

border-left: 140px solid #ff5a00;

border-bottom: 70px solid transparent;

}

菱形

制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合，使两个正反三角形上下显示。

#diamond {

width: 120px;

height: 120px;

background: #1eff00;

/* Rotate */

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

/* Rotate Origin */

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

margin: 60px 0 10px 310px;

}

梯形

梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。

#trapezium {

height: 0;

width: 120px;

border-bottom: 120px solid #ec3504;

border-left: 60px solid transparent;

border-right: 60px solid transparent;

}

平行四边形

平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。

#parallelogram {

width: 160px;

height: 100px;

background: #8734f7;

-webkit-transform: skew(30deg);

-moz-transform: skew(30deg);

-o-transform: skew(30deg);

transform: skew(30deg);

}

星形

星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。仔细体会下面的代码。

#star {

width: 0;

height: 0;

margin: 50px 0;

color: #fc2e5a;

position: relative;

display: block;

border-right: 100px solid transparent;

border-bottom: 70px solid #fc2e5a;

border-left: 100px solid transparent;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

}

#star:before {

height: 0;

width: 0;

position: absolute;

display: block;

top: -45px;

left: -65px;

border-bottom: 80px solid #fc2e5a;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

content: '';

-webkit-transform: rotate(-35deg);

-moz-transform: rotate(-35deg);

-ms-transform: rotate(-35deg);

-o-transform: rotate(-35deg);

}

#star:after {

content: '';

width: 0;

height: 0;

position: absolute;

display: block;

top: 3px;

left: -105px;

color: #fc2e5a;

border-right: 100px solid transparent;

border-bottom: 70px solid #fc2e5a;

border-left: 100px solid transparent;

-webkit-transform: rotate(-70deg);

-moz-transform: rotate(-70deg);

-ms-transform: rotate(-70deg);

-o-transform: rotate(-70deg);

}

六角星形

和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。

#star_six_points {

width: 0;

height: 0;

display: block;

position: absolute;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid #de34f7;

margin: 10px auto;

}

#star_six_points:after {

content: "";

width: 0;

height: 0;

position: absolute;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid #de34f7;

margin: 30px 0 0 -50px;

}

五边形

创建CSS五边形需要结合两个图形：一个梯形，然后在它的上面放一个三角形，共同组成一个五边形。

#pentagon {

width: 54px;

position: relative;

border-width: 50px 18px 0;

border-style: solid;

border-color: #277bab transparent;

}

#pentagon:before {

content: "";

height: 0;

width: 0;

position: absolute;

top: -85px;

left: -18px;

border-width: 0 45px 35px;

border-style: solid;

border-color: transparent transparent #277bab;

}

六边形

六边形的制作方法可以有很多种，可以像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。

#hexagon {

width: 100px;

height: 55px;

background: #fc5e5e;

position: relative;

margin: 10px auto;

}

#hexagon:before {

content: "";

width: 0;

height: 0;

position: absolute;

top: -25px;

left: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 25px solid #fc5e5e;

}

#hexagon:after {

content: "";

width: 0;

height: 0;

position: absolute;

bottom: -25px;

left: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 25px solid #fc5e5e;

}

八角形

八角形的制作方法也有多种方式，这里使用的是先制作两个相同的梯形，然后在两边分别放置一个三角形。

#octagon {

width: 100px;

height: 100px;

background: #ac60ec;

position: relative;

}

#octagon:before {

content: "";

width: 42px;

height: 0;

position: absolute;

top: 0;

left: 0;

border-bottom: 29px solid #ac60ec;

border-left: 29px solid #f4f4f4;

border-right: 29px solid #f4f4f4;

}

#octagon:after {

content: "";

width: 42px;

height: 0;

position: absolute;

bottom: 0;

left: 0;

border-top: 29px solid #ac60ec;

border-left: 29px solid #f4f4f4;

border-right: 29px solid #f4f4f4;

}

心形

心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点。

#heart {

position: relative;

}

#heart:before,#heart:after {

content: "";

width: 70px;

height: 115px;

position: absolute;

background: red;

left: 70px;

top: 0;

-webkit-border-radius: 50px 50px 0 0;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

#heart:after {

left: 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin: 100% 100%;

}

蛋形

蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。

#egg {

width: 136px;

height: 190px;

background: #ffc000;

display: block;

-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

无穷符号

无穷符号可以通过border属性和设置伪元素的角度来实现。

#infinity {

width: 220px;

height: 100px;

position: relative;

}

#infinity:before,#infinity:after {

content: "";

width: 60px;

height: 60px;

position: absolute;

top: 0;

left: 0;

border: 20px solid #06c999;

-moz-border-radius: 50px 50px 0;

border-radius: 50px 50px 0 50px;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

}

#infinity:after {

left: auto;

right: 0;

-moz-border-radius: 50px 50px 50px 0;

border-radius: 50px 50px 50px 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}

消息提示框

消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。

#comment_bubble {

width: 140px;

height: 100px;

background: #088cb7;

position: relative;

-moz-border-radius: 12px;

-webkit-border-radius: 12px;

border-radius: 12px;

}

#comment_bubble:before {

content: "";

width: 0;

height: 0;

right: 100%;

top: 38px;

position: absolute;

border-top: 13px solid transparent;

border-right: 26px solid #088cb7;

border-bottom: 13px solid transparent;

}

吃豆人

吃豆人的制作方法是先在一个圆形里面制作一个透明的三角形。

#pacman {

width: 0;

height: 0;

border-right: 70px solid transparent;

border-top: 70px solid #ffde00;

border-left: 70px solid #ffde00;

border-bottom: 70px solid #ffde00;

border-top-left-radius: 70px;

border-top-right-radius: 70px;

border-bottom-left-radius: 70px;

border-bottom-right-radius: 70px;

}

小结

CSS3为我们提供了制作各种复杂几何图形的能力，我们可以在页面中制作各种图形，在不支持的CSS3的浏览器中使用图片来作为回退方法。

weixin_40001634
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何实现不规则tab形状
AIGC大前端小王子
04-19 575
随着客户对UI什么的提升，很多不规则形状的需求就随之出现了。 一、UI需求 二、解决方案 2.1 HTML <div class="nav_wrapper"> <div @tap="changeNav(index)" v-for="(item,index) in navList" :key="index" class="nav_item" :class="{'active':index==currentNav}"> <span v-text="item"&gt.
使用CSS 3创建不规则图形
11-13 442
前言 CSS 创建复杂图形的技术即将会被广泛支持，并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解。 现在，我们已经可以使用CSS 3 常见不规则复杂图形了（点击链接查看），如下图所示： 使用CSS创建的图形，无法内置文字或实现文字环绕效果。因此，如何实现不规则图形和文字复杂布局也成为了一个热议话题。 今天我们就来...
css 不规则边角_CSS实现各种形状
weixin_39595310的博客
12-22 1266
CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。圆形要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID。圆形在设置CSS时要设置宽度和高度相...
css3创建多边形clip属性，可用来绘制不规则图形了
weixin_30951389的博客
10-21 217
.path1 { clip-path: polygon(5px 10px, 16px 3px, 16px 17px); } .path2 { clip-path: polygon(3px 5px, 17px 5px, 10px 16px); } .path3 { clip-path: polygon(5px 10px, 16px 3px, 16px 10px,...
CSS3绘制不规则图形
a378113472的博客
04-08 2117
由于近期的项目中出现了不规则的边框和图形， 所以只好提前先温习一下，以前收集的一些CSS3绘制的图形。。。样式绘制的图形比图片的性能要好，体验更佳。 废话不多说，我们直接看效果： 1、三角形系列（三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角） 主要用到的是：宽度高度设置为0， border的各个边的设置（各个边的透明或不透明）； .t...
不规则形状 前端_不规则形状的头像实现（SVG遮罩）
weixin_35826166的博客
01-14 926
序咱们前端同学经常遇到设计需求中要求圆形，比如圆形头像。下图为某博客的圆形头像。 但是你打开头像的原始链接就会发现，这个头像是矩形啊！为什么是圆形呢。 通常我们是使用CSS圆角属性，来达到这个效果。 需求有一天设计师说，我不要圆形啦！我要……呃，就6边形吧 ！ 嘿嘿嘿 。 这可咋整呢，我们知道网页中的元素都是呈矩形的。即便是border-radius也是遮罩出来的，但是没有六边形啊，就算有万一需求...
H5前端_高级实战案例_利用 css-doodle 库绘制动画（css）.rar
11-01
3. **创建图形**：使用CSS的属性，如`linear-gradient`、`rotate`、`scale`等，结合css-doodle库的API来绘制几何形状或图案。 4. **添加动画**：利用CSS3的`@keyframes`规则定义动画帧，并通过`animation`属性应用到...
css不规则图形实现原理及代码
09-25
总之，通过理解并灵活运用CSS边框属性，配合元素尺寸的精确控制和现代浏览器对CSS3的优秀支持，我们可以在网页中实现不规则图形，为网页设计增添新的可能性。这种方法相比于使用图片，减少了HTTP请求，加快了页面...
CSS3绘制不规则图形的一些方法示例
09-24
在现代网页设计中，绘制不规则图形的需求日益增长，而CSS3提供了多种工具和技术来实现这一目标。 首先，我们需要了解CSS3中的一些基本概念。CSS盒模型是CSS布局的基础，它定义了元素的尺寸和位置如何计算。理解盒...
CSS3绘制不规则图形（一）
热门推荐
suwyer的博客
07-14 3万+
由于近期的项目中出现了不规则的边框和图形， 所以只好提前先温习一下，以前收集的一些CSS3绘制的图形。。。样式绘制的图形比图片的性能要好，体验更佳。废话不多说，我们直接看效果：1、三角形系列（三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角）    主要用到的是：宽度高度设置为0， border的各个边的设置（各个边的透明或不透明）；                 .tri...
不规则形状 前端_css3创建多边形clip属性，可用来绘制不规则图形了
weixin_35995377的博客
12-24 375
.path1 {clip-path: polygon(5px 10px, 16px 3px, 16px 17px);}.path2 {clip-path: polygon(3px 5px, 17px 5px, 10px 16px);}.path3 {clip-path: polygon(5px 10px, 16px 3px, 16px 10px, 26px 10px, 26px 3px, 37px...
利用css3实现不规则图像
qq_24663023的博客
12-02 760
Star (6-points)       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 #star-six {     width: 0;  
html 绘制不规则图形,css3创建多边形clip属性，可用来绘制不规则图形了
weixin_39789399的博客
06-09 227
.path1 {clip-path: polygon(5px 10px, 16px 3px, 16px 17px);}.path2 {clip-path: polygon(3px 5px, 17px 5px, 10px 16px);}.path3 {clip-path: polygon(5px 10px, 16px 3px, 16px 10px, 26px 10px, 26px 3px, 37px...
css 不规则边角_使用 CSS 的 clip-path 属性实现不规则图形的显示
weixin_39814126的博客
01-16 297
clip-pathCSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。例子div {width: 200px;height: 200px;background: #6c00af;-webkit-clip-path: polygon(28% 6%,71% 15%,100% 75%,18% 39%,63% 27%,16% 22%,65% 19%);clip-path: pol...
css 不规则边角_CSS3绘制不规则图形（一）
weixin_39911066的博客
12-22 671
由于近期的项目中出现了不规则的边框和图形， 所以只好提前先温习一下，以前收集的一些CSS3绘制的图形。。。样式绘制的图形比图片的性能要好，体验更佳。废话不多说，我们直接看效果：1、三角形系列(三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角)主要用到的是：宽度高度设置为0， border的各个边的设置(各个边的透明或不透明)；.triangle-up {/* 三角形 */wi...
CSS3_动画和绘制特殊图形
LiLi的博客
07-26 535
CSS3 CSS3是CSS（层叠样式表）技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。 圆角border-radius 语法 border-radius：value；四个角 border-radius：value value；左上右下、右上左下 border-radius：value value value value； 代表设置对象左上角、右上角、右下角、左下角 顺时针设置 盒阴影box-
CSS3创建不规则图形与文本布局
"本文主要介绍了如何使用CSS3创建不规则图形，探讨了如何实现不规则图形与文字的复杂布局，适合前端开发者学习。" 在CSS3中，创建不规则图形的能力是一个重要的进步，使得设计师能够构建更为独特的网页布局和视觉...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值