基本图形包括：矩形、圆角矩形、圆形、椭圆形、三角形、值线、弧
这些图形的绘制用到了CSS圆角属性，不考虑IE8。
下面的实现在chrome浏览器运行通过。
1.矩形
立即学习“前端免费学习笔记（深入）”；
比较简单，通过CSS设置宽度、高度、背景色即可。
html:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="rectangle"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
css:
<span style="color: #000000;"> .rectangle {
width: 150px;
height: 100px;
background-color: orangered;
}</span>呈现：
2.圆角矩形
在矩形设置的基础上，增加圆角属性设定，这里用的单位是百分比,好处是可适应整体大小的变化而变化。
html:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='rounded-rectangle'</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
css:
<span style="color: #000000;"> .rounded-rectangle {
width: 150px;
height: 100px;
background-color: orangered;
<span style="background-color: #ffff00;">border-radius: 10%;</span>
}</span>呈现:
3.圆
设置为正方形，将圆角设成50%即可，其实就是圆角的半径为正方形的的半径。
html:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='circle'</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
css:
<span style="color: #000000;"> .circle {
width: 100px;
height: 100px;
background-color: orangered;
<span style="background-color: #ffff00;">border-radius: 50%;</span>
}</span>呈现:
4.椭圆
在圆形的基础上，将正方形设置成矩形即可。
html:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='ellipse'</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
css:
<span style="color: #000000;"> .ellipse {
width: 150px;
height: 100px;
background-color: orangered;
border-radius: 50%;
}</span>呈现:
5.三角形
乍一看三角形这个样子，还真是无从下手，没有什么现成的方法一步到位的完成，绘制它需要用到border的特性，这个很有意思。
html:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='triangle'</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
分解1：
现在我们来看一下有趣的border，做一个正方形，宽高都设成100px，设定四个边的border的宽度为10px，每条边设置不同的颜色。
<span style="color: #000000;"> .triangle{
width: 100px;
height: 100px;
border-style: solid;
background-color: orangered;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color:blueviolet;
<span style="background-color: #ffff00;">border-top-width: 10px;</span>
<span style="background-color: #ffff00;">border-bottom-width: 10px;</span>
<span style="background-color: #ffff00;">border-left-width: 10px;</span>
<span style="background-color: #ffff00;">border-right-width: 10px;</span>
}</span>呈现后发现很有意思，两条border边的交界处是斜角边，
分解2：
继续，将各条边的宽度放大，将正方形宽高都设成0px，将每条边的border的宽度都设成50px（原正方形宽度或高度的一半）
<span style="color: #000000;"> .triangle{
<span style="background-color: #ffff00;">width: 0px;</span>
<span style="background-color: #ffff00;">height: 0px;</span>
border-style: solid;
background-color: orangered;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color:blueviolet;
border-top-width: <span style="background-color: #ffff00;">50px</span>;
border-bottom-width: <span style="background-color: #ffff00;">50px</span>;
border-left-width: <span style="background-color: #ffff00;">50px</span>;
border-right-width: <span style="background-color: #ffff00;">50px</span>;
}</span>是不是各个边都露出三角形了，要的形状就出来了，这就是有趣的border。
分解3：
最后一步就简单了，把不需要的边都透明掉，只留下底边，并且透明掉背景。
<span style="color: #000000;"> .triangle{
width: 0px;
height: 0px;
border-style: solid;
background-color: <span style="background-color: #ffff00;">transparent</span>;
border-top-color: <span style="background-color: #ffff00;">transparent</span>;
border-right-color: <span style="background-color: #ffff00;">transparent</span>;
<span style="background-color: #ffff00;">border-bottom-color: blue;</span>
border-left-color:<span style="background-color: #ffff00;">transparent</span>;
border-top-width: 50px;
border-bottom-width: 50px;
border-left-width: 50px;
border-right-width: 50px;
}</span>透明掉各边和背景后，需要的三角形就出来了，很有趣。
如果要使他变成钝角，就把底边的宽度变小，如果是锐角，就增加宽度。
如果是直角，就把左或右border的宽度设成0px。
各种三角形可通过各边的宽度值的调整来实现。
6.直线
直线就比较简单，压缩高度或宽度就变成了直线。
html:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='line'</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
css:
<span style="color: #000000;"> .line{
width: 100px;
<span style="background-color: #ffff00;">height: 3px;</span>
background-color: orangered;
}</span>呈现:
7.弧
本质上是利用圆角来实现，现在需要把矩形的左上角的圆角绘制成弧形，那么把右边和底边border的宽度设成0px，让他们不可见，设置左上角圆角的半径，让其变大，看得明显些，其余的圆角半径全都设成0px，这样一个弧形就完成了。
html:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='arc'</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
css:
<span style="color: #000000;"> .arc {
width: 100px;
height: 100px;
border-style: solid;
border-top-width: 10px;
<span style="background-color: #ffff00;">border-bottom-width: 0px;</span>
border-left-width: 10px;
<span style="background-color: #ffff00;">border-right-width: 0px;</span>
border-top-color: blue;
border-bottom-color: red;
border-left-color: red;
border-right-color: red;
background-color: <span style="background-color: #ffff00;">transparent</span>;
border-top-right-radius: 0px;
<span style="background-color: #ffff00;">border-top-left-radius: 100px;</span>
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}</span>呈现:
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
C++高性能并发应用_C++如何开发性能关键应用
Java AI集成Deep Java Library_Java怎么集成AI模型部署
Golang后端API开发_Golang如何高效开发后端和API
Python异步并发改进_Python异步编程有哪些新改进
C++系统编程内存管理_C++系统编程怎么与Rust竞争内存安全
Java GraalVM原生镜像构建_Java怎么用GraalVM构建高效原生镜像
Python FastAPI异步API开发_Python怎么用FastAPI构建异步API
C++现代C++20/23/26特性_现代C++有哪些新标准特性如modules和coroutines
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
561
收藏
