CSS实现各种形状

最新推荐文章于 2021-11-03 16:41:41 发布
最新推荐文章于 2021-11-03 16:41:41 发布
阅读量249 收藏 1
点赞数
文章标签： photoshop

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

 圆形
 

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

< div id = "circle" ></ div >                             

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

# circle {
     width : 120px ;
     height : 120px ;
     background : #7fee1d ;
     -moz- border-radius : 60px ;
     -webkit- border-radius : 60px ;
     border-radius : 60px ;
}                             
 正方形
 

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

< div id = "square" ></ div >                             

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

# square {
     width : 120px ;
     height : 120px ;
     background : #f447ff ;
}                             
 长方形
 

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

< div id = "rectangle" ></ div >                             

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

#rectangle {
     width : 220px ;
     height : 120px ;
     background : #4da1f7 ;
}                             
 椭圆形
 

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

< div id = "oval" ></ 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。

< div id = "triangle" ></ div >                             
#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 ( -45 deg);
     -moz- transform : rotate ( -45 deg);
     -ms- transform : rotate ( -45 deg);
     -o- transform : rotate ( -45 deg);
     transform : rotate ( -45 deg);
/* 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( 30 deg);
     -moz- transform : skew( 30 deg);
     -o- transform : skew( 30 deg);
     transform : skew( 30 deg);
}                             
 星形
 

星形的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 ( 35 deg);
     -webkit- transform : rotate ( 35 deg);
     -ms- transform : rotate ( 35 deg);
     -o- transform : rotate ( 35 deg);
}
  
#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 ( -35 deg);
     -moz- transform : rotate ( -35 deg);
     -ms- transform : rotate ( -35 deg);
     -o- transform : rotate ( -35 deg);
}
  
#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 ( -70 deg);
     -moz- transform : rotate ( -70 deg);
     -ms- transform : rotate ( -70 deg);
     -o- transform : rotate ( -70 deg);
}                             
 六角星形

CSS六角星形

和五角星的制作方法不同，六角星形状的制作方法是操纵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五边形

创建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 ;
}                             
 八角形

CSS八角形

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

#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 ;
}                             
 心形

CSS心形

心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改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 ( -45 deg);
     -moz- transform : rotate ( -45 deg);
     -ms- transform : rotate ( -45 deg);
     -o- transform : rotate ( -45 deg);
     transform : rotate ( -45 deg);
     -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 ( 45 deg);
     -moz- transform : rotate ( 45 deg);
     -ms- transform : rotate ( 45 deg);
     -o- transform : rotate ( 45 deg);
     transform : rotate ( 45 deg);
     -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% ;
}                             
 无穷符号

CSS无穷符号

无穷符号可以通过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 ( -45 deg);
     -moz- transform : rotate ( -45 deg);
     -ms- transform : rotate ( -45 deg);
     -o- transform : rotate ( -45 deg);
     transform : rotate ( -45 deg);
}
  
#infinity:after {
     left : auto ;
     right : 0 ;
     -moz- border-radius : 50px 50px 50px 0 ;
     border-radius : 50px 50px 50px 0 ;
     -webkit- transform : rotate ( 45 deg);
     -moz- transform : rotate ( 45 deg);
     -ms- transform : rotate ( 45 deg);
     -o- transform : rotate ( 45 deg);
     transform : rotate ( 45 deg);
}                             
 消息提示框
 

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

#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 ;
}                             

 小

Linux????? Mr.Liyz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用CSS3创建不规则图形
02-03
CSS创建复杂图形的技术即将会被广泛支持，并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解。现在，我们已经可以使用CSS3常见不规则复杂图形了，如下图所示：使用CSS创建的图形，无法内置文字或实现文字环绕效果。因此，如何实现不规则图形和文字复杂布局也成为了一个热议话题。今天我们就来介绍一下如何实现这个效果。文章中我们将阐述如何使用CSS创建不规则图形，实现不规则的文本布局。学会如何创建不规则图形之后，你就可以发挥想象力，创建唯美的CSS页面了，下图既是使用该技术创建的《爱丽丝梦游仙境》效果图：注：这是CSS的最新技术，所以对浏览器版
css3绘制常见的30种形状（心形,五角星,六边形,钻石,对话框,阴阳鱼图等）
boy火巨的博客
03-12 3184
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等 新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的部分用法，在此总结一下，以供需要的朋友们，总共30个例子 长方形 #Rectangle{ width: 200px; height: 50px; ...
Jquery和CSS3实现图片鱼眼显示效果
itbaohuziji的专栏
05-03 1377
Jquery和CSS3实现图片鱼眼显示效果  记得在Flex中实现鱼眼效果的图片展示功能非常容易，对于JS而言，则略显复杂。但如今jquery和CSS3的组合，使得这种功能变得异常容易。今天我们就学习如何利用jquery和CSS3来实现各种不同的鱼眼效果。  基本效果：鼠标移动到图片上时，放大图片同时将该图片周围的图片适当放大，形成一个鱼眼效果，图片依次高亮显示。我们可以参看http://...
CSS特殊形状
bear_huangzhen的专栏
09-18 761
示例1（简单特殊图形）： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>特殊形状</title> <style type="text/css"> div{ display: inline-block...
用HTML和CSS3做个鱼,CSS3实现阴阳鱼
weixin_42136837的博客
06-18 502
直接上代码：阴阳鱼body { background: #F0DFAD; }.yin-yang { position: fixed; top: 50%; left: 50%; margin: -5rem 0 0 -5rem; height: 10rem; width: 10rem; border-radius: 50%; background: -webkit-linear-gradient(to...
30个 CSS 样式常用的静态形状
happy81997的博客
11-03 693
目录 代码 1. 椭圆 2. 上三角 3. 下三角 4. 左三角 5. 右三角 6. 左上角 7. 右上角 8. 左下角 9. 右下角 10. 箭头 11. 平行四边形 12. 梯形 13. 五边形 14. 六边形 15. 爱心 ❤️ 16. 无穷大 17. 钻石 ???? 18. 锁 ???? 19. 吃豆人 20. 对话泡泡 21. 太极 22. 丝带徽章 23. 雪佛兰车标 24. 放大镜 ???? 25. Facebook 图标 26. 月亮
Css斜四边形
hql1024的博客
12-13 1494
transform: skew(0deg, -20deg);
css3倾斜的平行四边形,CSS3技巧之形状（平行四边形）
weixin_33549415的博客
08-03 1755
上一小节给大家分享了各种椭圆的实现方法，此时我们来说一下平行四边形的实现方法。平行四边形基本变形属性transform有很多，接下来我们用到哪一个说哪一个。我们一般用skew属性来对矩形进行斜向拉伸，变成平行四边形，但是如果直接对元素使用的话，它里面的内容也会跟着斜向变动。嵌套元素方案对容器内容再应用一次反向的skewX()变形，从而抵消容器的变形效果来看一下html和css具体代码伪元素方法上面...
使用css实现四边形实现四角边框
小糖豆
12-01 2883
四边形实现四角边框
css实现四边形四角边框效果（没有使用定位，避免布局影响）
闲云野鸟的博客
03-22 2421
实现下面这种效果 开发中要实现下面这种效果，相信大家第一眼就会想到用定位，直接把四个边框定位上去就好了。 最开始我也是直接用的定位，封装成了一个组件。后面布局的时候出问题了，排列的时候很麻烦，对不起，调位置什么的都不好控制，而且因为要做到自适应，很不好做。后面想了很久，感觉可以用css的背景属性来做，这样的话这些问题全部都可以避免了。 直接上代码 这个html文件，可以复制直接看下 <h...
CSS中的各种形状
Mosum的博客
11-26 1082
CSS中的各种形状
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
热门推荐
DearMorning的博客
02-18 2万+
用纯CSS画出各种图形，包括基本的圆形、椭圆、等边三角形、直角三角形、平行四边形、梯形，多边形如五边形、六边形、八边形等，以及五角星、六角星、八角星、12角星，也包括稍微复杂一点的爱心、无穷大符号、鸡蛋、食豆人、提示对话框、钻石、阴阳八卦等
css实现单边斜切效果
“明明很开心”的博客空间
09-29 3553
需求 UI图中有需要斜切图样的需求，一个进度条，并且进度项不定，是一个list类型。效果如图，以下就是一个三个元素的数组遍历生成的进度条： 第一次尝试 首先写进度条并不难，只需要以下结构： // html <div class="progress-outer"> <div v-for="(item,key) in items" :key="index" class="progress-inner" :style={'width': item.percent + '%','left':
css3实现缺角四边形_利用CSS3实现折角效果实例源码
weixin_35950078的博客
12-23 217
先来看看静态的效果图实例代码复制代码代码如下:body {background-color: #eaf0f2;}h1{text-align: center;}.box{width:500px;height:300px;margin:0 auto;position:relative;}.img-layer{position: absolute;width: 500px;height: 300px;t...
css3实现缺角四边形_CSS3实现缺角矩形，折角矩形以及缺角边框
weixin_29129833的博客
12-23 1499
前言前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找ui小哥聊聊天，忽然灵光一闪，想起之前翻过的《css揭秘》一书，记得有这个篇章，遂有了此文。话不多说，放个效果图先缺角1. 伪元素实现.bg{width: 120px;height: 80px;background: #58a;} /* 下文元素都使用了此样式 */.cover{position: r...
css3实现缺角四边形_CSS3实现三种切角效果
weixin_30425639的博客
12-23 880
效果一：image.pnghtml:corner cutcorner cutcorner cutcorner cutCSS：.cornerCut{width:200px;margin: 10px 20px;height: 200px;background:#58a;color:#fff;text-align: center;font-size:10px;background:linear-grad...
css斜切角 斜边 倒角
徐同保的专栏
10-23 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,height=device-height"&gt
45个值得收藏的 CSS 形状（总结）
JNPF快速开发平台的博客
11-03 241
CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。 我们还可以使用 CSS 伪元素中的::before和::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个 HTML 元素在 CSS 中创建许多形状。 虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS ...
css 实现凹凸不规则的形状
最新发布
04-05
要实现凹凸不规则的形状，可以使用CSS的clip-path属性。clip-path属性用于裁剪元素的形状。 以下是一个示例，在这个示例中，我们使用clip-path属性创建了一个凹凸不规则的形状： HTML代码： ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值