笔触狂放9

这个屌丝很懒，什么也没留下！

热门标签

使用CSS3实现常见图形【小咚“面筋”记】_css边框钝角

作者：笔触狂放9 | 2024-02-16 21:46:14

踩

css边框钝角

文章目录

前言
一、矩形（正方形）
二、菱形
三、梯形
四、三角形
五、五角星
六、五边形
七、六角星
八、六边形
九、圆（各种样子的）
十、爱心
十一、钻石型
十二、月亮
十三、放大镜
十四、无穷符号
十五、太极八卦图
总结

前言

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>
1
2
3
4
5
6
7

正常的正方形

代码实现如下：

	<div style="
    width: 100px;
    height: 100px;
    background-color: royalblue;
    "></div>正常实现
    <div style="
    width: 0;
    height: 0;
    border: 50px solid rebeccapurple;
    "></div>边框实现
1
2
3
4
5
6
7
8
9
10

长方形

代码实现如下：

	<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>长方形(*^▽^*)
1
2
3
4
5
6
7
8

平行四边形

代码实现如下：

	<div style="
    width: 200px;
    height: 100px;
    background: yellowgreen;
    transform: skew(35deg);
    margin-left: 30px;
    "></div>&nbsp;&nbsp;&nbsp;平行四边形ψ(*｀ー´)ψ
1
2
3
4
5
6
7

二、菱形

代码实现如下：

	<div style="
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    background-color: blue;
    margin-left: 50px;
    margin-bottom: 20px;
    "></div>菱形ヽ(ー_ー)ノ
1
2
3
4
5
6
7
8

三、梯形

正常的梯形

代码如下（示例）：

	<div style="
    width: 100px;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid violet;
    "></div>梯形(๑*◡*๑)
1
2
3
4
5
6
7

朝着左边的梯形

代码如下（示例）：

	<div style="
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 100px solid goldenrod;
    height: 100px;
    width: 25px;
    "></div>朝左梯形٩(๑❛ᴗ❛๑)۶
1
2
3
4
5
6
7

直角梯形

代码如下（示例）：

	<div style="
    border-top: 100px solid salmon;
    border-left: 100px solid transparent;
    width: 100px;
    "></div>直角梯形(｡◕ˇ∀ˇ◕)
1
2
3
4
5

四、三角形

朝下的三角形

代码如下（示例）：

	<div style="
    width: 0;
    height: 0;
    border: 50px solid mediumturquoise;
    border-color: mediumturquoise transparent transparent;
    "></div>朝下三角形ヾ(●´∀｀●)
1
2
3
4
5
6

朝左的三角形

代码如下（示例）：

	<div style="
    width: 0;
    height: 0;
    border: 50px solid mediumturquoise;
    border-color: transparent mediumturquoise transparent transparent;
    "></div>朝左的三角形(๑╹◡╹)ﾉ"""
1
2
3
4
5
6

等腰三角形

代码如下（示例）：

	<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)ﾉ
1
2
3
4
5
6
7
8

左上等腰直角

代码如下（示例）：

	<div style="
    width: 0;
    border-top: 100px solid royalblue;
    border-right: 100px solid transparent;
    margin-left: 50px;
    "></div>左上等腰直角(◕ᴗ◕✿)
1
2
3
4
5
6

右下等腰直角

代码如下（示例）：

	<div style="
    width: 0;
    border-right: 100px solid royalblue;
    border-top: 100px solid transparent;
    margin-left: 50px;
    "></div>右下等腰直角( • ̀ω•́ )✧
1
2
3
4
5
6

朝下的直角三角形

代码如下（示例）：

	<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>朝下直角三角形(〃´-ω･)
1
2
3
4
5
6
7
8

朝上的直角三角形

代码如下（示例）：

	<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>朝上直角三角形∠( °ω°)／
1
2
3
4
5
6
7
8

钝角

代码如下（示例）：

	<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)钝角
1
2
3
4
5
6
7
8

五、五角星

五角星
代码如下（示例）：

	<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>五角星(*❦ω❦)
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

六、五边形

下面一个梯形，加上三角形。
梯形加三角形
代码如下（示例）：

	<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⊙;)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

七、六角星

六角星
代码如下（示例）：

	<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>六角星ヾ(･ω･*)ﾉ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

八、六边形

六边形
代码如下（示例）：

	<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>六边形(Ｔ▽Ｔ)
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

九、圆（各种样子的）

实心圆

代码如下（示例）：

	<div style="
    width: 100px;
    height: 100px;
    background-color: coral;
    border-radius: 50%;
    /* border-radius: 50px; */
    margin-left: 15px;
    "></div>实心圆(๑Ő௰Ő๑)
1
2
3
4
5
6
7
8

圆环（同心圆）

代码如下（示例）：

	<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>圆环｡◕ᴗ◕｡
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

上半圆

代码如下（示例）：

	<div style="
    width: 200px;
    height: 100px;
    background-color: cyan;
    border-radius: 100px 100px 0 0;
    "></div>上半圆&&lt;(▰˘◡˘▰)&gt;
1
2
3
4
5
6

右半圆

代码如下（示例）：

	<div style="
    width: 100px;
    height: 200px;
    background-color: slateblue;
    border-radius: 0 100px 100px 0;
    "></div>右半圆(づ●─●)づ
1
2
3
4
5
6

四分之一圆

代码如下（示例）：

	<div style="
    width: 150px;
    height: 150px;
    background-color: springgreen;
    border-radius: 0 0 100% 0;
    "></div>四分之一圆ヾ(*ΦωΦ)ツ
1
2
3
4
5
6

椭圆-水平方向

代码如下（示例）：

	<div style="
    width: 200px;
    height: 100px;
    background-color: steelblue;
    border-radius: 100px/50px;
    /* 水平/垂直 */
    "></div>椭圆-水平方向ㄟ( ▔, ▔ )ㄏツ
1
2
3
4
5
6
7

椭圆-垂直方向

代码如下（示例）：

	<div style="
    width: 100px;
    height: 200px;
    background-color: chocolate;
    border-radius: 50px/100px; /* 水平/垂直 */
    margin-left: 30px;
    "></div>椭圆-垂直方向(*❦ω❦)
1
2
3
4
5
6
7

胶囊-水平方向

代码如下（示例）：

	<div style="
    width: 200px;
    height: 100px;
    background-color: darkorange;
    border-radius: 50px;
    "></div>胶囊-水平方向(❁´ω`❁)
1
2
3
4
5
6

胶囊-垂直方向

代码如下（示例）：

	<div style="
    width: 100px;
    height: 200px;
    background-color: rgb(233, 84, 39);
    border-radius: 50px;
    margin-left: 30px;
    "></div>胶囊-垂直方向(◍´꒳`◍)
1
2
3
4
5
6
7

饼状图

代码如下（示例）：

	<div style="
    width: 0;
    height: 0;
    border: 50px solid brown;
    border-radius: 50%;
    border-bottom-color: aqua;
    "></div>饼状图(✺ω✺)
1
2
3
4
5
6
7

鸡蛋

代码如下（示例）：

	<div style="
    width: 120px;
    height: 164px;
    background-color: lightgreen;
    border-radius: 60px 60px 60px 60px/100px 100px 64px 64px;
    /* 对于边框曲度的解读：width(左上、右上、右下、左下)/height(同width顺时针) */
    "></div>鸡蛋(✖人✖)
1
2
3
4
5
6
7

欧朋浏览器图标

代码如下（示例）：

	<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>欧朋浏览器图标(((;꒪ꈊ꒪;)))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

十、爱心

原理简单，通过一个正方形和两个圆形，然后再旋转一下就能画出一个标准的爱心了。
永远的爱
代码如下（示例）：

	<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>永恒之心 (｡♥ᴗ♥｡) 
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

十一、钻石型

钻石型
代码如下（示例）：

	<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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

十二、月亮

两个圆
代码如下（示例）：

	<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>月亮不睡，你不睡，你是秃头小宝贝٩(๑❛ᴗ❛๑)۶
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

十三、放大镜

放大镜
代码如下（示例）：

	<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>放大镜 罒ω罒
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

十四、无穷符号

无穷大
代码如下（示例）：

	<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>无穷符号┗( ▔, ▔ )┛
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

十五、太极八卦图

太极图

代码如下（示例）：

	<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>&nbsp;&nbsp;太极八卦图
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

太极图设计的太巧妙了，通过一个半黑半白的圆，黑的是下边框，白的是背景，再通过两个伪类元素的圆环，进行位移就能实现这个太极图了，刚开始我还在想是不是要多写几个div来实现，看懂代码以后发现实现代码不需要，通过一个元素和两个伪类元素就能实现，这个太极图主要要考虑到border和content的宽度和，通过细心的计算width就能完美实现太极图。

总结

本想着昨天一晚上能写完这篇博客的，但是发现这些图形实现起来有点花时间，一边找实现方法，一边写代码，一边写博客，着实花了不少时间，昨天写到晚上11点停电，今天又花了一天时间，其他的任务也还没完成，虽然时间花费的挺多，但也算是没白费，这次总算把基础的这些图形实现会了，对这些边框和伪类属性又熟悉了几分，不至于下次面试还不会写三角形（哈哈哈），现在花里胡哨的各种基础图案都能代码实现了，以后等用了也可以翻出来看看，css写起来还是挺有意思的，尤其是写完就能见成效，结合上动画应该还能玩出更花的，这些还是等以后我再实现吧！终于写完了，但是似乎好像又欠了一篇博客，这个坑是填不完了吗…以后工作更忙，日更还是有点时间紧凑呀！还是继续加油吧，大不了一直每天欠一篇呗！（不愧是我！）

—— 2020.11.17 17:43 今天也要跑步感觉累了苦了就想想下面的名言，所有的苦和累都是为了更好的向梦想接近，感谢初中老师当时送我们的这句话，到现在还没忘记，现在也送给在读的各位。一起加油吧！各位共勉！

今日份励志名言：

“故天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。”
——（语出先秦·孟子及其弟子《生于忧患，死于安乐》）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/96974

使用CSS3实现常见图形 【小咚“面筋”记】_css边框钝角