CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）

最新推荐文章于 2020-07-23 14:30:09 发布
原创 最新推荐文章于 2020-07-23 14:30:09 发布 · 147 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用纯CSS绘制各种图形，包括正方形、长方形、圆形、椭圆、梯形、平行四边形以及更复杂的星形、五角星、六角星、五边形、六边形、八边形和心形。通过巧妙利用CSS3的属性如border-radius, transform等，无需图片即可轻松创建这些形状。

　　我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制基本图形（圆、椭圆等）。

您可能感兴趣的相关文章

 

Square
 
 
1
2
3
4
5
# square  {
     width : 100px ;
     height : 100px ;
     background : red ;
}

　　

Rectangle
 
 
1
2
3
4
5
#rectangle {
     width : 200px ;
     height : 100px ;
     background : red ;
}

　　

Circle
 
 
1
2
3
4
5
6
7
8
9
10
# circle  {
     width : 100px ;
     height : 100px ;
     background : red ;
     -moz-border-radius: 50px ;
     -webkit-border-radius: 50px ;
     border-radius: 50px ;
}
 
/* Cleaner, but slightly less support: use "50%" as value */

　　

Oval
 
 
1
2
3
4
5
6
7
8
9
10
#oval {
     width : 200px ;
     height : 100px ;
     background : red ;
     -moz-border-radius: 100px  / 50px ;
     -webkit-border-radius: 100px  / 50px ;
     border-radius: 100px  / 50px ;
}
 
/* Cleaner, but slightly less support: use "50%" as value */

　　

Trapezoid
 
 
1
2
3
4
5
6
7
#trapezoid {
     border-bottom : 100px  solid  red ;
     border-left : 50px  solid  transparent ;
     border-right : 50px  solid  transparent ;
     height : 0 ;
     width : 100px ;
}

　　

Parallelogram
 
 
1
2
3
4
5
6
7
8
#parallelogram {
     width : 150px ;
     height : 100px ;
     -webkit-transform: skew( 20 deg);
        -moz-transform: skew( 20 deg);
          -o-transform: skew( 20 deg);
     background : red ;
}

 

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

 

 

 

 

 

 

创意动效：鼠标经过触发魔法阵旋转（渐现符文）
2301_76277481的博客
05-07 1355
通过本文，我们详细介绍了如何使用HTML、CSS和JavaScript实现一个创意动画效果：当鼠标经过一个魔法阵时，魔法阵开始旋转，并且符文逐渐显现。这种效果在游戏和奇幻主题的网站中非常受欢迎，能够为网站增添一份神秘和创意。通过综合运用HTML的结构构建、CSS的样式和动画设计以及JavaScript的交互逻辑，我们可以创造出各种丰富多样的创意动效，提升网站的用户体验和视觉吸引力。希望这些内容能够帮助你提升网页设计的创意和实用性，创造出更多令人惊叹的网页效果。
从圆心向外流光的魔法阵shader
纸箱猪的专栏
02-20 1万+
终于实现出美术同事想要的这个效果了： 　　下面就来讲述我写这个shader的思路。 　　首先需要一张魔法阵的底图： 　　用一个平面（Plane）做模型，将底图贴在模型上： 　　代码如下： Shader "Inception-Fx/FlowInsideOut" { Properties { _M
魔法阵
lMonster81
04-17 568
题目描述 小Q搜寻了整个魔法世界找到了四块魔法石所在地，当4块魔法石正好能构成一个正方形的时候将启动魔法阵，小Q就可以借此实现一个愿望。 现在给出四块魔法石所在的坐标，小Q想知道他是否能启动魔法阵 输入描述: 输入的第一行包括一个整数（1≤T≤5）表示一共有T组数据 每组数据的第一行包括四个整数x[i](0≤x[i]≤10000)，即每块魔法石所在的横坐标 每组数据的第二行...
魔法阵开机动画
10-05
开机动画
腾讯2018安卓实习模拟笔试题——魔法阵
陈小星的博客
03-23 871
真的觉得自己数据结构与算法也太薄弱了，好多stl容器都不会用，真的是练太少了导致很不熟练！
用canvas画一个魔法阵
qq_40504108的博客
07-23 648
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #can { border: 1px solid #000000; background-color: black; } </style> </head> <sc
CSS3 画基本图形，圆形、椭圆形、三角形等
09-27
在CSS3中，绘制基本图形是一项非常实用的功能，它允许开发者使用纯CSS创建各种形状，如圆形、椭圆形、三角形、平行四边形、梯形、六角星以及五角星等，无需借助图像编辑软件。下面我们将详细介绍如何利用CSS3实现...
CSS3绘制几何图形技巧：圆形、自适应椭圆与半椭圆实现
本文将详细介绍如何利用CSS3绘制出三种常见的几何图形：圆形、自适应椭圆以及自适应的半椭圆。 1. **圆形**：要创建一个圆形元素，关键在于使用`border-radius`属性。通过设置元素的宽度和高度相等，并将`border-...
纯css3绘制各种图形图标样式代码
11-24
总的来说，纯CSS3绘制图形和图标不仅提高了性能，还增强了设计的灵活性。通过熟练掌握以上提到的各种技巧，开发者可以创建出独特且富有创意的UI元素，提升用户体验。在提供的压缩文件"texiao2138_1560929583"中，...
css3实现椭圆轨迹旋转的示例代码
09-22
CSS3（层叠样式表3）是设计网页样式的标准之一，它提供了一系列强大的特性，可以让开发者创建更加丰富和动态的网页。本文将详细介绍如何使用CSS3实现元素沿着椭圆形轨迹进行旋转的示例代码。 首先，我们需要了解...
CSS3绘制图形：自适应椭圆、半椭圆与平行四边形
本示例主要展示了如何使用CSS3实现自适应的椭圆、运动的椭圆、半椭圆以及平行四边形等图形。 1. 自适应的椭圆 这个示例展示了如何创建一个自适应大小且具有平滑过渡效果的椭圆。关键在于使用`border-radius`属性...
纯CSS实现状态圆点
热门推荐
weixin_42194386的博客
11-06 1万+
不多说，直接上代码 &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;&lt;/title&gt;         &lt;style type="text/css"&gt;     
css 椭圆形输入框
spfLinux的博客
03-26 6467
主要将padding的值和border-radius的值设置成为相等的即可。
浅谈纯CSS绘制圆形、椭圆形、菱形、三角形
筱葭的博客
03-01 9803
利用border属性： 以下三角为例，把左、右、下边框设置为透明色或与背景色相同的颜色，推荐透明色，这样拓展性更好。 #triangle { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: yellow green red pin
CSS3制作各种形状图像
weixin_34124939的博客
11-23 3931
制作圆形： 要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID <div id="circle"></div> 圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可： #circle { width: 120px; heig...
2018腾讯模拟笔试——魔法阵
Cindy_Huang的博客
03-24 749
魔法阵昨天做的腾讯笔试题目，有这样一道题：其实思路挺简单的，输入n为n个样例，接下来输入2n行的数字，每行数字以空格隔开思路就是，计算两个点之间的距离，然后比较距离的比值是否为2，比较难处理的是距离的存储，因为是正方形，四边距离是一样的，对角距离是一样的，故有两个不同的数，可采用Set集合进行存储。接下来附上代码：import java.util.*; /** * Created by asu...
半圆，1/4圆，半椭圆，1/4椭圆，纯CSS画图
hahahahahahahaha__1的博客
10-01 4109
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; /*半圆*/ .box{ width:100px; heig
一些有趣的 CSS 魔法和布局（上）
weixin_34396902的博客
03-24 299
前言 布局和样式，是每个前端的必修课。在日常的工作中，也会碰到一些特定场景的布局需求，配合上样式，就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局，以及浏览各大网站时碰巧发现的神奇特效写法，在此做个分享。 由于篇幅原因，会分为 2 篇。今天，会先介绍一些有趣而又实用的布局的写法。之后的一篇，将展现样式的神奇魔法。 懒加载占位图自适应 在商城中展示商品图片时，如果图片较多，一种比较好的体验是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值