前言
css算是最基础的东西吧，之前也写的挺多的，什么特效动画啥的，但是没有系统的学习，也不经常用，只有用到的时候才会去百度，偏偏面试的时候问我怎么用css画一个三角形，啊这…我这么久都没好好玩css了，上网搜一下到是可以，可惜当时面试完全忘了怎么搞，以前能徒手画爱心，现在呵呵…css3里面好多属性，让网页可以做的更炫酷了，尤其是动画之类的属性，现在也来复盘一下吧，好好的用代码画几个图形，来提升一下自己的css技能，多写就能记下了。
注: 以下代码全部在Chrome浏览器运行，未做兼容性措施。
一、矩形（正方形）
- 彩色正方框
先来个花里胡哨的彩色正方形
代码实现如下：
<div style="
border-style: solid;
border-width:20px ;
border-color: #000 blue green red;
height: 50px;
width: 50px;
"></div>
- 正常的正方形
代码实现如下：
<div style="
width: 100px;
height: 100px;
background-color: royalblue;
"></div>正常实现
<div style="
width: 0;
height: 0;
border: 50px solid rebeccapurple;
"></div>边框实现
- 长方形
代码实现如下：
<div style="
width: 0px;
height: 0;
border-left: 100px solid rebeccapurple;
border-right: 100px solid red;
border-top: 50px solid green;
border-bottom: 50px solid yellow;
"></div>长方形(*^▽^*)
- 平行四边形
代码实现如下：
<div style="
width: 200px;
height: 100px;
background: yellowgreen;
transform: skew(35deg);
margin-left: 30px;
"></div> 平行四边形ψ(*｀ー´)ψ
二、菱形
代码实现如下：
<div style="
width: 100px;
height: 100px;
transform: rotate(45deg);
background-color: blue;
margin-left: 50px;
margin-bottom: 20px;
"></div>菱形ヽ(ー_ー)ノ
三、梯形
- 正常的梯形
代码如下（示例）：
<div style="
width: 100px;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid violet;
"></div>梯形(๑*◡*๑)
- 朝着左边的梯形
代码如下（示例）：
<div style="
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid goldenrod;
height: 100px;
width: 25px;
"></div>朝左梯形٩(๑❛ᴗ❛๑)۶
- 直角梯形
代码如下（示例）：
<div style="
border-top: 100px solid salmon;
border-left: 100px solid transparent;
width: 100px;
"></div>直角梯形(｡◕ˇ∀ˇ◕)
四、三角形
- 朝下的三角形
代码如下（示例）：
<div style="
width: 0;
height: 0;
border: 50px solid mediumturquoise;
border-color: mediumturquoise transparent transparent;
"></div>朝下三角形ヾ(●´∀｀●)
- 朝左的三角形
代码如下（示例）：
<div style="
width: 0;
height: 0;
border: 50px solid mediumturquoise;
border-color: transparent mediumturquoise transparent transparent;
"></div>朝左的三角形(๑╹◡╹)ﾉ"""
- 等腰三角形
代码如下（示例）：
<div style="
width: 0;
height: 0;
border-bottom: 100px solid steelblue;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
margin-left: 60px;
"></div>等腰三角形ヾ(o´∀｀o)ﾉ
- 左上等腰直角
代码如下（示例）：
<div style="
width: 0;
border-top: 100px solid royalblue;
border-right: 100px solid transparent;
margin-left: 50px;
"></div>左上等腰直角(◕ᴗ◕✿)
- 右下等腰直角
代码如下（示例）：
<div style="
width: 0;
border-right: 100px solid royalblue;
border-top: 100px solid transparent;
margin-left: 50px;
"></div>右下等腰直角( • ̀ω•́ )✧
- 朝下的直角三角形
代码如下（示例）：
<div style="
border-left: 50px solid red;
border-bottom: 100px solid transparent;
/* border-top: 100px solid green;
border-right: 50px solid transparent;
width: 0; */
margin-left: 50px;
"></div>朝下直角三角形(〃´-ω･)
- 朝上的直角三角形
代码如下（示例）：
<div style="
border-bottom: 100px solid skyblue;
border-right: 50px solid transparent;
width: 0;
/* border-left: 50px solid red;
border-top: 100px solid transparent; */
margin-left: 50px;
"></div>朝上直角三角形∠( °ω°)／
- 钝角
代码如下（示例）：
<div style="
width: 0;
height: 0;
border-top: 50px solid darkolivegreen;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
transform: rotate(35deg);
"></div>(o°ω°o)钝角
五、五角星
代码如下（示例）：
<style>
.five_ointed_star {
width: 0;
border-bottom: 70px solid gold;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform: rotate(35deg);
position: relative;
margin-bottom: 60px;
margin-top: 50px;
}
.five_ointed_star::after {
content: "";
position: absolute;
left: -100px;
width: 0;
border-bottom: 70px solid gold;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform: rotate(70deg);
}
.five_ointed_star::before {
content: "";
position: absolute;
left: -100px;
width: 0;
border-bottom: 70px solid gold;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform: rotate(-71deg);
}
</style>
<div class="five_ointed_star"></div>五角星(*❦ω❦)
六、五边形
下面一个梯形，加上三角形。
代码如下（示例）：
<style>
.pentagon {
border-top: 50px solid steelblue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
width: 50px;
position: relative;
}
.pentagon:after {
content: "";
position: absolute;
top: -90px;
left: -25px;
border-bottom: 40px solid steelblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 0;
}
</style>
<div class="pentagon"></div>五边形(⊙x⊙;)
七、六角星
代码如下（示例）：
<style>
.hexagons {
width: 0;
border-top: 87px solid gold;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
position: relative;
}
.hexagons:after {
width: 0;
content: "";
left: -50px;
top: -119px;
position: absolute;
border-bottom: 87px solid gold;
/* 两个三角形组成，切换一个颜色可知 */
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
<div class="hexagons"></div>六角星ヾ(･ω･*)ﾉ
八、六边形
代码如下（示例）：
<style>
.hexagon {
width: 100px;
height: 50px;
background-color: pink;
position: relative;
margin-bottom: 50px;
}
.hexagon::after {
content: "";
position: absolute;
left: 0;
top: -40px;
border-bottom: 40px solid pink;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 0;
}
.hexagon::before {
content: "";
position: absolute;
left: 0;
top: 50px;
border-top: 40px solid pink;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 0;
}
</style>
<div class="hexagon"></div>六边形(Ｔ▽Ｔ)
九、圆（各种样子的）
- 实心圆
代码如下（示例）：
<div style="
width: 100px;
height: 100px;
background-color: coral;
border-radius: 50%;
/* border-radius: 50px; */
margin-left: 15px;
"></div>实心圆(๑Ő௰Ő๑)
- 圆环（同心圆）
代码如下（示例）：
<style>
.circle {
width: 160px;
height: 160px;
background-color: greenyellow;
border-radius: 50%;
position: relative;
z-index: -1;
}
.circle:after {
content: "";
position: absolute;
left: 20px;
top: 20px;
width: 120px;
height: 120px;
background: rgba(255, 255, 255, 1);
border-radius: 50%;
z-index: 0;
}
</style>
<div class="circle"></div>圆环｡◕ᴗ◕｡
- 上半圆
代码如下（示例）：
<div style="
width: 200px;
height: 100px;
background-color: cyan;
border-radius: 100px 100px 0 0;
"></div>上半圆&<(▰˘◡˘▰)>
- 右半圆
代码如下（示例）：
<div style="
width: 100px;
height: 200px;
background-color: slateblue;
border-radius: 0 100px 100px 0;
"></div>右半圆(づ●─●)づ
- 四分之一圆
代码如下（示例）：
<div style="
width: 150px;
height: 150px;
background-color: springgreen;
border-radius: 0 0 100% 0;
"></div>四分之一圆ヾ(*ΦωΦ)ツ
- 椭圆-水平方向
代码如下（示例）：
<div style="
width: 200px;
height: 100px;
background-color: steelblue;
border-radius: 100px/50px;
/* 水平/垂直 */
"></div>椭圆-水平方向ㄟ( ▔, ▔ )ㄏツ
- 椭圆-垂直方向
代码如下（示例）：
<div style="
width: 100px;
height: 200px;
background-color: chocolate;
border-radius: 50px/100px; /* 水平/垂直 */
margin-left: 30px;
"></div>椭圆-垂直方向(*❦ω❦)
- 胶囊-水平方向
代码如下（示例）：
<div style="
width: 200px;
height: 100px;
background-color: darkorange;
border-radius: 50px;
"></div>胶囊-水平方向(❁´ω`❁)
- 胶囊-垂直方向
代码如下（示例）：
<div style="
width: 100px;
height: 200px;
background-color: rgb(233, 84, 39);
border-radius: 50px;
margin-left: 30px;
"></div>胶囊-垂直方向(◍´꒳`◍)
- 饼状图
代码如下（示例）：
<div style="
width: 0;
height: 0;
border: 50px solid brown;
border-radius: 50%;
border-bottom-color: aqua;
"></div>饼状图(✺ω✺)
- 鸡蛋
代码如下（示例）：
<div style="
width: 120px;
height: 164px;
background-color: lightgreen;
border-radius: 60px 60px 60px 60px/100px 100px 64px 64px;
/* 对于边框曲度的解读：width(左上、右上、右下、左下)/height(同width顺时针) */
"></div>鸡蛋(✖人✖)
- 欧朋浏览器图标
代码如下（示例）：
<style>
.opera_icon {
width: 258px;
height: 278px;
background: skyblue;
border-radius: 100%;
position: relative;
}
.opera_icon:after {
content: "";
position: absolute;
left: 68px;
top: 24px;
width: 122px;
height: 230px;
background: rgb(255, 255, 255);
border-radius: 100%;
}
</style>
<div class="opera_icon"></div>欧朋浏览器图标(((;꒪ꈊ꒪;)))
十、爱心
原理简单，通过一个正方形和两个圆形，然后再旋转一下就能画出一个标准的爱心了。
代码如下（示例）：
<style>
.heart_of_eternity {
width: 100px;
height: 100px;
background-color: red;
position: relative;
transform: rotate(45deg);
margin: 35px;
}
.heart_of_eternity:before {
content: "";
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
position: absolute;
left: -50px;
top: 0;
}
.heart_of_eternity:after {
content: "";
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
position: absolute;
left: 0;
top: -50px;
}
</style>
<div class="heart_of_eternity"></div>永恒之心 (｡♥ᴗ♥｡)
十一、钻石型
代码如下（示例）：
<style>
.diamonds {
width: 50px;
border-bottom: 40px solid sandybrown;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
position: relative;
margin-bottom: 60px;
}
.diamonds::after {
content: "";
position: absolute;
left: -25px;
top: 40px;
border-top: 60px solid sandybrown;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
<div class="diamonds"></div>钻石型(；OдO)
十二、月亮
代码如下（示例）：
<style>
.moon {
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
position: relative;
margin-left: 100px;
}
.moon::after {
content: "";
position: absolute;
left: -30px;
top: -15px;
width: 100px;
height: 100px;
background: white;
border-radius: 50%;
}
</style>
<div class="moon"></div>月亮不睡，你不睡，你是秃头小宝贝٩(๑❛ᴗ❛๑)۶
十三、放大镜
代码如下（示例）：
<style>
.magnifier {
width: 40px;
height: 40px;
border: 10px solid black;
border-radius: 50%;
position: relative;
margin-bottom: 20px;
}
.magnifier::after {
content: "";
position: absolute;
left: 55px;
top: 23px;
width: 10px;
height: 50px;
background-color: black;
transform: rotate(-55deg);
}
</style>
<div class="magnifier"></div>放大镜 罒ω罒
十四、无穷符号
代码如下（示例）：
<style>
.infinite {
width: 212px;
height: 100px;
position: relative;
}
.infinite::before,
.infinite::after {
position: absolute;
left: 0;
top: 0;
content: "";
width: 60px;
height: 60px;
border: 20px solid darkblue;
border-radius: 50% 50% 0 50%;
transform: rotate(-45deg);
}
.infinite::before {
transform: rotate(135deg);
right: 0;
left: auto;
}
</style>
<div class="infinite"></div>无穷符号┗( ▔, ▔ )┛
十五、太极八卦图
代码如下（示例）：
<style>
.eight_trigrams {
width: 96px;
height: 48px;
background-color: white;
border-color: black;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
transform: rotate(90deg);
}
.eight_trigrams::before {
content: "";
position: absolute;
top: 50%;
left: 0;
background-color: white;
border: 16px solid black;
border-radius: 100%;
width: 16px;
height: 16px;
}
.eight_trigrams::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background-color: black;
border: 16px solid rgb(255, 255, 255);
border-radius: 100%;
width: 16px;
height: 16px;
}
</style>
<div class="eight_trigrams"></div> 太极八卦图
太极图设计的太巧妙了，通过一个半黑半白的圆，黑的是下边框，白的是背景，再通过两个伪类元素的圆环，进行位移就能实现这个太极图了，刚开始我还在想是不是要多写几个div来实现，看懂代码以后发现实现代码不需要，通过一个元素和两个伪类元素就能实现，这个太极图主要要考虑到border和content的宽度和，通过细心的计算width就能完美实现太极图。
总结
本想着昨天一晚上能写完这篇博客的，但是发现这些图形实现起来有点花时间，一边找实现方法，一边写代码，一边写博客，着实花了不少时间，昨天写到晚上11点停电，今天又花了一天时间，其他的任务也还没完成，虽然时间花费的挺多，但也算是没白费，这次总算把基础的这些图形实现会了，对这些边框和伪类属性又熟悉了几分，不至于下次面试还不会写三角形（哈哈哈），现在花里胡哨的各种基础图案都能代码实现了，以后等用了也可以翻出来看看，css写起来还是挺有意思的，尤其是写完就能见成效，结合上动画应该还能玩出更花的，这些还是等以后我再实现吧！终于写完了，但是似乎好像又欠了一篇博客，这个坑是填不完了吗…以后工作更忙，日更还是有点时间紧凑呀！还是继续加油吧，大不了一直每天欠一篇呗！（不愧是我！）
—— 2020.11.17 17:43 今天也要跑步 感觉累了苦了就想想下面的名言，所有的苦和累都是为了更好的向梦想接近，感谢初中老师当时送我们的这句话，到现在还没忘记，现在也送给在读的各位。一起加油吧！各位共勉！
今日份励志名言：
“故天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。”
——（语出 先秦·孟子及其弟子《生于忧患，死于安乐》）
2721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
