CSS基本形状汇编与展示

Created by @毛瑞

声明：翻译自CSS-TRICKS，进行了重新排版与组织、有内容增加与删减。

1 前言

本文翻译自CSS-TRICKS，进行了重新排版与组织、有内容增加与删减。目前收录了基本形状共45个，还会陆续加入进来新的形状。大家快快收藏学习吧！

2 三角形

2.1 尖角向上

.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid cyan;
}

显示效果

2.2 尖角向下

.triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid cyan;
}

显示效果

2.3 尖角向左

.triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid olive;
    border-bottom: 50px solid transparent;
}

显示效果

2.4 尖角向右

.triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid olive;
    border-bottom: 50px solid transparent;
}

显示效果

2.5 左上尖角

.triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid purple;
    border-right: 100px solid transparent;
}

显示效果

2.6 右上尖角

.triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid purple;
    border-left: 100px solid transparent;
}

显示效果

2.7 左下尖角

.triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid purple;
    border-right: 100px solid transparent;
}

显示效果

2.8 右下尖角

.triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid purple;
    border-left: 100px solid transparent;
}

显示效果

3 四边形

3.1 正方形

.square {
    width: 100px;
    height: 100px;
    background: olive;
}

显示效果

3.2 长方形

.rectangle {
    width: 160px;
    height: 100px;
    background: olive;
}

显示效果

3.3 平行四边形

.parallelogram {
    width: 150px;
    height: 100px;
    transform: skew(20deg);
    background: purple;
}

显示效果

3.4 梯形

.trapezoid {
    border-bottom: 100px solid purple;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    height: 0;
    width: 160px;
}

显示效果

3.5 菱形

.diamond {
    width: 0; height: 0; position: relative; top: -80px;
    border: 80px solid transparent; border-bottom-color: olive;
}
.diamond:after {
    content: ''; position: absolute;
    left: -80px; top: 80px; width: 0; height: 0;
    border: 80px solid transparent; border-top-color: olive;
}

显示效果

3.6 钻石盾

.diamond-shield {
    width: 0; height: 0; position: relative; top: -50px;
    border: 50px solid transparent; border-bottom: 20px solid olive;
}
.diamond-shield:after {
    content: ''; position: absolute;
    left: -50px; top: 20px; width: 0; height: 0;
    border: 50px solid transparent;
    border-top: 70px solid olive;
}

显示效果

3.7 窄一点的菱形

.diamond-narrow {
    width: 0;  height: 0; position: relative;  top: -70px;
    border: 70px solid transparent;  border-bottom: 90px solid purple;
}
.diamond-narrow:after {
    content: '';  position: absolute;
    left: -70px;  top: 90px;  width: 0;  height: 0;
    border: 70px solid transparent;
    border-top: 90px solid purple;
}

显示效果

4 多边形

4.1 五边形

.pentagon {
    position: relative; width: 54px;
    box-sizing: content-box;
    border-width: 50px 18px 0; border-style: solid;
    border-color: purple 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 purple;
}

显示效果

4.2 钻石形

.cut-diamond {
    border-style: solid;
    border-color: transparent transparent purple transparent;
    border-width: 0 25px 25px 25px;
    height: 0;  width: 50px;
    box-sizing: content-box;
    position: relative;
    margin: 20px 0 50px 0;
}
.cut-diamond:after {
    content: "";  position: absolute;
    top: 25px;  left: -25px;
    width: 0;  height: 0;
    border-style: solid;
    border-color: purple transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

显示效果

4.3 六边形

.hexagon {
    width: 100px;  height: 55px;
    background: olive;  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 olive;
}
.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 olive;
}

显示效果

4.4 八边形

.octagon {
    width: 100px;  height: 100px;
    background: olive;  position: relative;
}
.octagon:before {
    content: ""; position: absolute;
    width: 100px;  height: 0;
    top: 0;  left: 0;
    border-bottom: 29px solid olive;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
}
.octagon:after {
    content: ""; position: absolute;
    width: 100px;  height: 0;
    bottom: 0;  left: 0;
    border-top: 29px solid olive;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
}

显示效果

5 圆形相关

5.1 圆形

.circle {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50%
}

显示效果

5.2 椭圆形

.oval {
    width: 160px;
    height: 80px;
    background: purple;
    border-radius: 80px / 40px;
}

显示效果

5.3 鸡蛋形

.egg {
    display: block;
    width: 100px;
    height: 140px;
    background-color: olive;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

显示效果

5.4 月牙形

.moon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 20px 20px 0 0 olive;
}

显示效果

5.5 锥形

.cone {
    width: 0;  height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-top: 100px solid purple;
    border-radius: 50%;
}

显示效果

5.6 吃豆人

.pacman {
    width: 0px;  height: 0px;
    border-right: 60px solid transparent;
    border-top: 60px solid purple;
    border-left: 60px solid purple;
    border-bottom: 60px solid purple;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

显示效果

6 星形相关

6.1 五角星

.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;
    transform: rotate(35deg);
}
.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: '';
    transform: rotate(-35deg);
}
.star-five:after {
    content: ''; color: red;
    position: absolute;  display: block;
    top: 3px;  left: -105px;
    width: 0px;  height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
}

显示效果

6.2 六角星

.star-six {
    width: 0;  height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid olive;
    position: relative;
}
.star-six:after {
    width: 0;  height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid olive;
    position: absolute;  content: "";
    top: 30px;  left: -50px;
}

显示效果

6.3 八角星

.burst-8 {
    margin: 20px 0;
    background: olive;
    width: 80px;  height: 80px;
    position: relative;
    text-align: center;
    transform: rotate(20deg);
}
.burst-8:before {
    content: "";
    position: absolute;
    top: 0;  left: 0;
    height: 80px;  width: 80px;
    background: olive;
    transform: rotate(135deg);
}

显示效果

6.4 十二角星

.burst-12 {
    background: purple;
    width: 80px;  height: 80px;
    position: relative;
    text-align: center;
}
.burst-12:before, .burst-12:after {
    content: "";
    position: absolute;
    top: 0;  left: 0;
    height: 80px;  width: 80px;
    background: purple;
}
.burst-12:before {
    transform: rotate(30deg);
}
.burst-12:after {
    transform: rotate(60deg);
}

显示效果

7 心形

.heart {
    position: relative;
    width: 100px; height: 90px;
}
.heart:before, .heart:after {
    position: absolute;
    content: "";
    left: 50px; top: 0;
    width: 50px;  height: 80px;
    background: red;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

显示效果

8 无限符号

.infinity {
    position: relative;
    width: 160px;  height: 76px;
    box-sizing: content-box;
}
.infinity:before, .infinity:after {
    content: "";
    box-sizing: content-box;
    position: absolute;
    top: 0; left: 0;
    width: 37px; height: 37px;
    border: 20px solid olive;
    border-radius: 50px 50px 0 50px;
    transform: rotate(-45deg);
}
.infinity:after {
    left: auto;  right: 0;
    border-radius: 50px 50px 50px 0;
    transform: rotate(45deg);
}

显示效果

9 气泡

.bubble {
    width: 120px; height: 80px;
    background: olive;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.bubble:before {
    content: "";
    position: absolute;
    right: 100%; top: 26px;
    width: 0;  height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid olive;
    border-bottom: 13px solid transparent;
}

显示效果

10 阴阳八卦

.yin-yang {
    width: 96px; height: 48px;
    box-sizing: content-box;
    background: #eee;
    border-color: purple;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
.yin-yang:before {
    content: "";
    position: absolute;
    top: 50%; left: 0;
    background: #eee;
    border: 18px solid purple;
    border-radius: 100%;
    width: 12px;  height: 12px;
    box-sizing: content-box;
}
.yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;  left: 50%;
    background: purple;
    border: 18px solid #eee;
    border-radius: 100%;
    width: 12px;  height: 12px;
    box-sizing: content-box;
}

显示效果

11 徽章缎带

.badge-ribbon {
    position: relative;
    background: purple;
    height: 100px;
    width: 100px;
    border-radius: 50px;
}
.badge-ribbon:before, .badge-ribbon:after {
    content: '';
    position: absolute;
    border-bottom: 70px solid purple;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    top: 70px;
    left: -10px;
    transform: rotate(-140deg);
}
.badge-ribbon:after {
    left: auto;
    right: -10px;
    transform: rotate(140deg);
}

显示效果

12 电视屏幕

.tv {
    position: relative;
    width: 160px;  height: 110px;
    margin: 20px 0;  color: white;
    background: olive;
    border-radius: 50% / 10%;
    text-align: center;
    text-indent: .1em;
}
.tv:before {
    content: '';
    position: absolute;
    top: 10%; bottom: 10%;
    right: -5%; left: -5%;
    background: inherit;
    border-radius: 5% / 50%;
}

显示效果

13 V形标志

.chevron {
    position: relative;
    text-align: center;
    padding: 12px;
    width: 160px;height: 40px;
}
.chevron:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 50%;  height: 100%;
    background: olive;
    transform: skew(0deg, 30deg);
}
.chevron:after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 50%;  height: 100%;
    background: olive;
    transform: skew(0deg, -30deg);
}

显示效果

14 放大镜

.magnifying-glass {
    font-size: 10em;
    display: inline-block;
    position: relative;
    width: 0.4em; height: 0.4em;
    box-sizing: content-box;
    border: 0.1em solid purple;
    border-radius: 0.35em;
}
.magnifying-glass:before {
    content: "";
    display: inline-block;
    position: absolute;
    right: -0.25em;  bottom: -0.1em;
    border-width: 0;
    background: purple;
    width: 0.35em;  height: 0.08em;
    transform: rotate(45deg);
}

显示效果

15 标志【flag】

.flag {
    width: 110px;
    height: 96px;
    box-sizing: content-box;
    position: relative;
    background: purple;
}
.flag:after {
    content: "";
    position: absolute;
    left: 0;  bottom: 0;
    width: 0;  height: 0;
    border-bottom: 32px solid white;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
}

显示效果

16 十字标志

.cross {
    background: olive;
    width: 20px; height: 100px;
    position: relative;
}
.cross:after {
    background: olive;
    content: "";
    width: 100px; height: 20px;
    top: 40px; left: -40px;
    position: absolute;
}

显示效果

17 底座

.base {
    background: olive;
    display: inline-block;
    width: 100px; height: 55px;
    margin-left: 20px;
    margin-top: 55px;
    position: relative;
}
.base:before {
    position: absolute;
    content: "";
    width: 0; height: 0;
    top: -35px;  left: 0;
    border-bottom: 35px solid olive;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

显示效果

18 方向指示

.pointer {
    width: 150px;
    height: 60px;
    position: relative;
    background: purple;
}
.pointer:after {
    content: "";
    position: absolute;
    left: 0;  bottom: 0;
    width: 0;  height: 0;
    border-left: 30px solid white;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
}
.pointer:before {
    content: "";
    position: absolute;
    right: -30px;  bottom: 0;
    width: 0;  height: 0;
    border-left: 30px solid purple;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
}

显示效果

19 锁

19.1 锁定

.lock {
    font-size: 8px;
    position: relative;
    width: 18em;  height: 13em;
    border-radius: 2em;
    top: 10em;
    box-sizing: border-box;
    border: 3.5em solid purple;
    border-right-width: 7.5em;
    border-left-width: 7.5em;
    margin: 0 0 6rem 0;
}
.lock:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: 2.5em solid purple;
    width: 14em;  height: 12em;
    top: -12em;  left: 50%;
    margin-left: -7em;
    border-top-left-radius: 7em;
    border-top-right-radius: 7em;
}
.lock:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: 1em solid purple;
    width: 5em;  height: 8em;
    border-radius: 2.5em;
    left: 50%;  top: -1em;
    margin-left: -2.5em;
}

显示效果

19.2 锁开

.unlock {
    font-size: 8px;
    position: relative;
    width: 18em;  height: 13em;
    border-radius: 2em;
    top: 10em;  left: 3em;
    box-sizing: border-box;
    border: 3.5em solid purple;
    border-right-width: 7.5em;
    border-left-width: 7.5em;
    margin: 0 0 6rem 0;
}

.unlock:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: 2.5em solid purple;
    border-bottom: 0;
    width: 14em;  height: 12em;
    top: -14em;  left: 50%;
    margin-left: -16em;
    border-top-left-radius: 7em;
    border-top-right-radius: 7em;
}
.unlock:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: 1em solid purple;
    width: 5em;  height: 8em;
    border-radius: 2.5em;
    top: -1em;  left: 50%;
    margin-left: -2.5em;
}

显示效果

20 弧形箭头

.curvedarrow {
    position: relative;
    width: 0;  height: 0;
    font-size: 8px;
    border-top: 9em solid transparent;
    border-right: 9em solid olive;
    transform: rotate(10deg);
    margin: 4em 0 4em 5.5em;
}

.curvedarrow:after {
    content: "";
    position: absolute;
    border: 0 solid transparent;
    border-top: 3em solid olive;
    border-radius: 20em 0 0 0;
    top: -11.5em;  left: -8.75em;
    width: 12em;  height: 12em;
    transform: rotate(45deg);
}

显示效果

21 结语

原文链接【https://css-tricks.com/the-shapes-of-css/】

本人水平有限，在翻译过程中难免有错误产生，如发现请不吝指正！谢谢。