纯CSS画的基本图形技巧绘制（矩形、圆形、三角形、多边形、爱心、八卦等）

最新推荐文章于 2024-04-26 22:14:41 发布
最新推荐文章于 2024-04-26 22:14:41 发布
阅读量2.5k 收藏 4
点赞数
分类专栏： 前端相关知识 文章标签： css 多边形 椭圆 六边形 
图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。

图形

  gg


六边形举例：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css graph</title>
<style type="text/css" media="screen">

/*六边形*/
#hexagon {
    width: 200px;
    height: 40px;
    background: #f66;
    position: relative;
    margin: 50px 0px 50px 20px;
}
#hexagon:before {
    content: "";
    position: absolute;
   /* top: -25px; */
    left: 200px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;/*（加大三角形的斜边长度）*/
    border-left: 15px solid red;  /*（加大三角形的高度）*/
    border-bottom: 20px solid transparent; /*（加大三角形的斜边长度）*/
}

#hexagon:after {
    content: "";
    position: absolute;
    /*bottom: -25px; */
    right: 200px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent; 
    border-right: 15px solid red; 
    border-bottom: 20px solid transparent; 
}
</style>
</head>
 
<body>
<div id="hexagon"></div>六边形<br />
</body>
</html>


1、正方形


代码如下:

#rectangle { 
width: 200px; 
height: 100px; 
background: red; 
} 

3、圆形


复制代码
代码如下:

#oval { 
width: 200px; 
height: 100px; 
background: red; 
-moz-border-radius: 100px / 50px; 
-webkit-border-radius: 100px / 50px; 
border-radius: 100px / 50px; 
} 

5、上三角

最终效果：

 

 

CSS代码如下：


复制代码
代码如下:

#triangle-down { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 100px solid red; 
} 

7、左三角

最终效果： 

 CSS代码如下：


复制代码
代码如下:

#triangle-right { 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-left: 100px solid red; 
border-bottom: 50px solid transparent; 
} 

9、左上三角

最终效果： 

 CSS代码如下：


复制代码
代码如下:

#triangle-topright { 
width: 0; 
height: 0; 
border-top: 100px solid red; 
border-left: 100px solid transparent; 
} 

11、左下三角

最终效果： 

 CSS代码如下：


复制代码
代码如下:

#triangle-bottomright { 
width: 0; 
height: 0; 
border-bottom: 100px solid red; 
border-left: 100px solid transparent; 
} 

13、平行四边形


复制代码
代码如下:

#trapezoid { 
border-bottom: 100px solid red; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
height: 0; 
width: 100px; 
} 

15、六角星


复制代码
代码如下:

#star-five { 
margin: 50px 0; 
position: relative; 
display: block; 
color: red; 
width: 0px; 
height: 0px; 
border-right: 100px solid transparent; 
border-bottom: 70px solid red; 
border-left: 100px solid transparent; 
-moz-transform: rotate(35deg); 
-webkit-transform: rotate(35deg); 
-ms-transform: rotate(35deg); 
-o-transform: rotate(35deg); 
} 
#star-five:before { 
border-bottom: 80px solid red; 
border-left: 30px solid transparent; 
border-right: 30px solid transparent; 
position: absolute; 
height: 0; 
width: 0; 
top: -45px; 
left: -65px; 
display: block; 
content: ''; 
-webkit-transform: rotate(-35deg); 
-moz-transform: rotate(-35deg); 
-ms-transform: rotate(-35deg); 
-o-transform: rotate(-35deg); 
} 
#star-five:after { 
position: absolute; 
display: block; 
color: red; 
top: 3px; 
left: -105px; 
width: 0px; 
height: 0px; 
border-right: 100px solid transparent; 
border-bottom: 70px solid red; 
border-left: 100px solid transparent; 
-webkit-transform: rotate(-70deg); 
-moz-transform: rotate(-70deg); 
-ms-transform: rotate(-70deg); 
-o-transform: rotate(-70deg); 
content: ''; 
} 

17、五角大楼


复制代码
代码如下:

#hexagon { 
width: 100px; 
height: 55px; 
background: red; 
position: relative; 
} 
#hexagon:before { 
content: ""; 
position: absolute; 
top: -25px; 
left: 0; 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 25px solid red; 
} 
#hexagon:after { 
content: ""; 
position: absolute; 
bottom: -25px; 
left: 0; 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 25px solid red; 
} 

19、八角形


复制代码
代码如下:

#heart { 
position: relative; 
width: 100px; 
height: 90px; 
} 
#heart:before, 
#heart:after { 
position: absolute; 
content: ""; 
left: 50px; 
top: 0; 
width: 50px; 
height: 80px; 
background: red; 
-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%; 
} 

21、鸡蛋形状


复制代码
代码如下:

#egg { 
display:block; 
width: 126px; 
height: 180px; 
background-color: red; 
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; 
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 
} 

23、食逗人（Pac-Man）

最终效果： 

 CSS代码如下：


复制代码
代码如下:

#talkbubble { 
width: 120px; 
height: 80px; 
background: red; 
position: relative; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
} 
#talkbubble:before { 
content:""; 
position: absolute; 
right: 100%; 
top: 26px; 
width: 0; 
height: 0; 
border-top: 13px solid transparent; 
border-right: 26px solid red; 
border-bottom: 13px solid transparent; 
} 

25、12角星


复制代码
代码如下:

#burst-8 { 
background: red; 
width: 80px; 
height: 80px; 
position: relative; 
text-align: center; 
-webkit-transform: rotate(20deg); 
-moz-transform: rotate(20deg); 
-ms-transform: rotate(20deg); 
-o-transform: rotate(20eg); 
transform: rotate(20deg); 
} 
#burst-8:before { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
height: 80px; 
width: 80px; 
background: red; 
-webkit-transform: rotate(135deg); 
-moz-transform: rotate(135deg); 
-ms-transform: rotate(135deg); 
-o-transform: rotate(135deg); 
transform: rotate(135deg); 
} 

27、阴阳


gg

复制代码
代码如下:

#yin-yang { 
width: 96px; 
height: 48px; 
background: #eee; 
border-color: red; 
border-style: solid; 
border-width: 2px 2px 50px 2px; 
border-radius: 100%; 
position: relative; 
} 
#yin-yang:before { 
content: ""; 
position: absolute; 
top: 50%; 
left: 0; 
background: #eee; 
border: 18px solid red; 
border-radius: 100%; 
width: 12px; 
height: 12px; 
} 
#yin-yang:after { 
content: ""; 
position: absolute; 
top: 50%; 
left: 50%; 
background: red; 
border: 18px solid #eee; 
border-radius:100%; 
width: 12px; 
height: 12px; 
} 

好了，就到这里了，一共28个，个人觉得后面几个比较犀利。这些代码的来源是css-tricks。由青藤屋博客整理，转载请保留原文链接：http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html


千寻～
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中border属性的特殊用法(实现特殊形状)
02-21
css中border属性的特殊用法(实现特殊形状)-包含代码示例
CSS：N种使用CSS 绘制三角形的方法
Yummy的博客
04-13 3万+
目录 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 2、使用 linear-gradient 绘制三角形 3、使用 conic-gradient 绘制三角形 4、transform: rotate 配合 overflow: hidden 绘制三角形 5、使用 clip-path 绘制三角形 6、利用字符绘制三角形 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 使用 border 实现三角形应该是大部分人都掌握的，也是各种面经中经常出现的
CSS 如何画一个实心、带边缘色（气泡聊天框）、圆角的三角形
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-12 897
点击上方三分钟学前端，关注公众号回复交流，加入前端编程面试算法每日一题群面试官也在看的前端面试资料最终实现效果：（从左到右分别是实心、带边缘色、圆角三角形）实心三角形步骤一：正方形先画个...
如何利用CSS画三角形、圆形、柠檬、小药丸?
weixin_48082900的博客
10-20 375
用CSS就能能画出好玩的特殊图形~
css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等
cumi7754的博客
08-16 468
css 绘制三角形Before we start. If you want more free content but in video format. Don't miss out on my Youtube channel where I publish weekly videos on FrontEnd coding. https://www.youtube.com/user/Weibenf...
CSS画圆和三角形
hexiyuanhecy的博客
11-06 379
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS画图形&lt;/title&gt; &lt;style&gt; #circle{ width: 200px; height: 20
【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
热门推荐
LZGS_4的专栏
07-10 8万+
在网页中，经常会用到各种Icon，如果老师麻烦设计狮画出来不免有些不好意思，所以有时候我们也可以用CSS写出各种简单的形状，一来可以减轻他们的负担，二来也可以使用CSS替代图片，提高加载速度。 在网页中，结合CSS能画出来的最基本的形状就是矩形，所以，我们可以在矩形的基础上做出各种变换，得到很多不同的形状。 这次的分享主要用到圆角、边框、定位等知识点（鉴于IE9以上才支持圆角，暂时不考虑兼容问
如何用css实现弧度圆角?三角形以及圆形
子钦加油的博客
11-24 1572
用css画矩形圆角 ，需要使用到border-radius这个属性，下图四角圆，代码显示如下：border-radius:60px; width:360px; height:200px; border:#900 1px solid;margin:20px 20px; 也可以通过控制border-radius的属性，将左上角为弧形和右下角为弧形，主要为border-top-left...
使用CSS绘制几何图形（圆形、三角形、扇形、菱形等
feifei9989的博客
03-25 919
在实际开发中，会出现一些小三角，用icon又不方便，于是我使用css绘制，并进行记录。，让两边的角没那么锐利，但是向内的角暂时没办法更改。，当我没有加的时候，圆形会变成椭圆形。5、具体三角形伪类使用中，可以通过。3、在三角形伪类中：可以适当修改。，则注意在使用伪类的div中加。4、三角形伪类主要是：通过。1、在使用伪类时，要加。
css制作多边形的方法111111
sinat_38992528的博客
06-08 3204
css3完成多边形 1、正方形 最终效果： CSS代码如下： #square { width: 100px; height: 100px; background: red; } 2、长方形 最终效果： CSS代码如下： #rectangle { width: 200px; height: 100px; background: red; } 3、圆形 最终效果： CSS代码如下： #circle { width: 10...
CSS绘制各种各样的形状图形
cs007711的博客
08-19 1469
我们在编写前端代码时，经常会遇到各种各样的形状图形（如：边框对话框，三角形，平行四边形、圆角边框、圆形、四叶草、花瓣等），除了用背景图片（css雪碧图或css精灵图+定位引用）和插入img图片的方法，我们还可以用css边框、圆角（border-radius）、渐变和定位的方法结合使用，绘制各种各样的形状图形。
css添加一条属性能够绘制一个矩形框
09-25
添加一条属性，它能够绘制一个矩形框，可以指定矩形边的颜色，边的宽度，边的样式等等，具体的实现步骤如下，感兴趣的朋友不要错过
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
09-25
今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形
CSS3 画基本图形，圆形、椭圆形、三角形等
09-27
主要介绍了CSS3 画基本图形，圆形、椭圆形、三角形等的相关资料,需要的朋友可以参考下
网页动画素材 纯css3绘制逼真神奇宝贝伊布动画（抖音资料）
07-11
网页动画素材 纯css3绘制逼真神奇宝贝伊布动画（抖音资料）网页动画素材 纯css3绘制逼真神奇宝贝伊布动画（抖音资料）网页动画素材 纯css3绘制逼真神奇宝贝伊布动画（抖音资料）网页动画素材 纯css3绘制逼真神奇宝贝...
scrollintoview方法滚动距离顶部距离
weixin_55932347的博客
04-26 65
方法是 DOM API 的一部分，用于将元素滚动到视图中。这个方法接收一个布尔值参数。，指示是否需要滚动到视图的顶部。
常见的css面试题（持续更新，欢迎补充）
清浅就是我的博客
04-22 474
总结面试常问的css相关面试题~通常遇见margin塌陷，是我们同时给父子元素都设置的margin， 此时元素不会像我们想的那样撑开，而是选取最大margin去显示。如何解决这个问题呢？ 给父元素设置浮动给父元素设置：overflow：hidden给元素设置为绝对定位一般来说：行内样式> id选择器 > class选择器 > 类型（标签）选择器和伪元素选择器 > 属性选择器.当上述只有一个的时候，很明显就能看出来谁的优先级高， 但是当同时存在id选择器 、 class选择器 、标签选择器 、 属
【React】CSS 局部样式
最新发布
小秀的博客
04-26 56
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
css边距的接触
2401_83693610的博客
04-26 345
4个边 padding: 0px;上下 左右 padding: 0px 20px;上 左右 下 padding: 0px 20px 30px;上 右 下 左 padding: 0px 20px 30px 40px;平移这个元素位置的一半 :transform: translate(-50%,0px);左右 上下居中。
html三角形正方形代码,用CSS画三角形，纯CSS绘制三角形的代码
05-23
绘制三角形的纯CSS代码： ```html <div class="triangle"></div> ``` ```css .triangle { width: 0; height: 0; border-top: 50px solid #f00; /* 上边为红色 */ border-right: 50px solid transparent; /* 右边为透明 */ border-bottom: 50px solid transparent; /* 下边为透明 */ border-left: 50px solid transparent; /* 左边为透明 */ } ``` 绘制正方形的HTML代码： ```html <div class="square"></div> ``` ```css .square { width: 100px; height: 100px; background-color: #f00; } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值