CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

最新推荐文章于 2022-08-04 11:43:55 发布
最新推荐文章于 2022-08-04 11:43:55 发布
阅读量987 收藏 1
点赞数
分类专栏： ＣＳＳ＋ＤＩＶ

CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）


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 ;
     height : 0 ;
     border-left : 50px solid transparent ;
     border-right : 50px solid transparent ;
     border-bottom : 100px solid red ;
     position : relative ;
}
#star-six:after {
     width : 0 ;
     height : 0 ;
     border-left : 50px solid transparent ;
     border-right : 50px solid transparent ;
     border-top : 100px solid red ;
     position : absolute ;
     content : "" ;
     top : 30px ;
     left : -50px ;
}

　　

Star (5-points)
 
 
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
#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( 35 deg);
    -webkit-transform: rotate( 35 deg);
    -ms-transform:     rotate( 35 deg);
    -o-transform:      rotate( 35 deg);
}
#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( -35 deg);
    -moz-transform:    rotate( -35 deg);
    -ms-transform:     rotate( -35 deg);
    -o-transform:      rotate( -35 deg);
 
}
#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( -70 deg);
    -moz-transform:    rotate( -70 deg);
    -ms-transform:     rotate( -70 deg);
    -o-transform:      rotate( -70 deg);
    content : '' ;
}

　　

Pentagon

 

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#pentagon {
     position : relative ;
     width : 54px ;
     border-width : 50px 18px 0 ;
     border-style : solid ;
     border-color : red transparent ;
}
#pentagon:before {
     content : "" ;
     position : absolute ;
     height : 0 ;
     width : 0 ;
     top : -85px ;
     left : -18px ;
     border-width : 0 45px 35px ;
     border-style : solid ;
     border-color : transparent transparent red ;
}

　　

Hexagon

 

 
 
 
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
26
27
28
#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 ;
}

　　

Octagon
 
 
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
26
27
28
29
30
#octagon {
     width : 100px ;
     height : 100px ;
     background : red ;
     position : relative ;
}
 
#octagon:before {
     content : "" ;
     position : absolute ;
     top : 0 ;
     left : 0 ;
     border-bottom : 29px solid red ;
     border-left : 29px solid #eee ;
     border-right : 29px solid #eee ;
     width : 42px ;
     height : 0 ;
}
 
#octagon:after {
     content : "" ;
     position : absolute ;
     bottom : 0 ;
     left : 0 ;
     border-top : 29px solid red ;
     border-left : 29px solid #eee ;
     border-right : 29px solid #eee ;
     width : 42px ;
     height : 0 ;
}

　　

Heart
 
 
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#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( -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% ;
}

　


zh89233
关注
专栏目录
用css3 绘制心形图案
xieyuleisss的博客
07-21 589
闲来无聊，做做CSS3 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
css3绘制常见的30种形状（心形,五角星,六边形,钻石,对话框,阴阳鱼图等）
boy火巨的博客
03-12 3252
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等 新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的部分用法，在此总结一下，以供需要的朋友们，总共30个例子 长方形 #Rectangle{ width: 200px; height: 50px; ...
纯CSS绘制心形图案
max_1414的博客
10-15 336
1，首先准备两个div <div id='love'> <div class="left"></div> <div class="right"></div> </div> 这个心形，是由里面两个div拼接而成，最外层div做容器，剩下由CSS完成 2，加背景，圆弧度，绝对定位 #love{ ...
如何用 css 画一个心形
weixin_34410662的博客
12-19 703
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形 第一步 画一个长方形 (Draw a rectangle) 这个长方形就是爱心的一半 <div class="setp1"></div> 复制代码 .setp1 { width: 50px; height: 100px;...
CSS制作爱心
花暖啊丶的博客
09-17 1986
                                       一步一步教你用CSS画爱心 在制作爱心之前，首先介绍一下用CSS制作正方形和圆。至于为什么，到制作爱心的时候会告诉大家 一丶话不多说，先教大家怎么用css画一个圆形。 ①我们先学一下CSS制作一个正方形的方法。这里我们用一个类选择器 &lt;div class="square"&gt;&lt;/div&gt; ...
css样式心形
css使多个相互之间有间隔的元素两端对齐显示
12-14 2303
<div class="heart-shape"></div> .heart-shape{ position: relative; width: 200px; height: 200px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms
CSS_shape.zip_CSS 绘制图形
09-21
本压缩包“CSS_shape.zip”聚焦于利用CSS来绘制各种有趣的图形，使得网页设计更加丰富多彩。通过直接复制和使用提供的代码，你可以快速地在自己的项目中实现这些图形。 首先，`css_shape.html`是主示例文件，它可能...
CSS绘制五角星
10-26
通过纯CSS绘制五角星、六角形、五边形、六边形、心形等多种形状是前端开发中的一种常见需求。下面将详细介绍如何使用CSS绘制这些形状。 一、六角形绘制 要绘制六角形，需要使用CSS的border属性来创建六角形的每...
纯CSS代码写出各种不规则的形状图形
weixin_43878963的博客
08-04 2740
做网页设计时经常要用到各种形状的图形，对于规则的图形很简单，但是对于不规则的图形，一般我们都是用图片来切图实现。不过今天新起点博客给大家分享几十种看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。...
CSS3绘制各类图形
何以飘零去_何以少团栾
10-11 556
三角形 #triangle{ width:0; height: 0; border-left:25px solid transparent; border-right:25px solid transparent; border-bottom:50px solid #f60; }同理：半圆#half-round{ border:4px solid #c
div+css 心形效果
11-14
使用div+css，实现的心形效果，但是不兼容ie浏览器
懒人原生纯CSS实现六边形效果
06-12
效果描述： 最近网上看到一个前端面试题，要求面试者用纯CSS实现一个6边形的效果 乍一看有点乱，但是仔细分析下，其实并没有那么难 将六边形拆开成三部分，左边是一个三角形，中间一个长方形，右侧再来一个三角形，然后再将其定位起来即可 那么就是一个div，内部嵌套三个div即可实现 当然，你也可以省略左右两个div，只用一个div即可实现，怎么办呢？那就是用CSS3的伪类代替左右两个div 使用方法： 1、将style.css中的样式拷贝到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可
css3画正六边形
08-11
纯css3画正六边形
JS实现六角图绘制
12-12
JS实现六角图绘制，包含源代码和调用说明。 所谓六角图 就是利用功率表测量电流相位的一种方法，它是一种简单有效的相位检测方法。利用六角图能正确的判断出： 1)同一组电流互感器三相电流之间的相位是否正确。 2)功率方向继电器接线是否正确。 3)差动保护中不同组别电流互感器的电流相位是否正确。 4)电流互感器变比是否正确。因此，向量六角图在实际应用中具有相当广泛的用途。 六角图的原理 在一定坐标系统中，任何相量都可以用它在任何两个相交轴上的垂直投影来表示。根据这一原理，我们采用的坐标系统是互成120’的三相对称电压系统。由于线电压不受零序电压的干扰，所以采用三相线电压作为测量三相电流相位的基准量。在相量图中，被测电流在一个电压相量上的投影，可以确定该电流相量端点的轨迹；在两个电压相量上的投影，可以确定被测电流相量端点的位置(即电流的相位和大小)；用此方法得出不同方向的电流数值，进行矢量计算，即可检验结果的准确性。
用css绘制各种形状（放松一下）
taotaomin99的博客
06-01 804
自适应的椭圆border-radius它可以单独指定水平和垂直半径。 用 / 分隔这两个值。并且该属性的值不仅可以接受长度值，还能接收百分比的值。百分比的值会基于元素的尺寸进行解析，宽是水平半径的解析，高是垂直半径的解析。so 代码如下：div { width: 100%; height: 300px; background: pink;
css实现六边形
社会人
07-26 3048
拷贝的代码 顺便记录一下 效果图如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;CSS3 实现六边形图片展
css3实现六边形
HELLO WORLD
05-01 2832
最近项目中遇到响应式项目需要制作六边形。传统的方式让我想到了切图，但是图片不利于做鼠标交互效果；css3让我想到了新的方式，下面分享一下开发经验 具体效果： 实现原理： 这个效果的主要css样式有： 1.&gt;transform: rotate(120deg); 图片旋转 2.&gt;overflow:hidden; 超出隐藏 3.&gt;visibility: hidden; ...
css3实现六边形列表
wuyt2008的专栏
11-11 7891
最近在做六边形列表，看到老外写的一个，感觉很不错。 https://github.com/web-tiki/responsive-grid-of-hexagons demo：https://codepen.io/web-tiki/pen/HhCyd 这个可以容易的嵌入背景图片，只是会被放大些许。 优点是：可以自适应。 缺点是：需要手动在css代码例如设置每行有多少个六
CSS3实例：绘制各类几何图形教程
在CSS3的世界里，绘制几何图形是一种常见的设计技巧，它不仅能提升页面的视觉效果，还能帮助开发者实现创新的交互体验。本文将深入探讨如何利用CSS3的特性来实现各种几何形状，包括圆形、自适应椭圆以及自适应的半...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值