Published on

使用 CSS 绘制形状

Authors
  • avatar
    Name
    Tszkong Cheng
    Twitter

使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆等等，并不只是可以绘制矩形，还可以绘制心形、钻石、鸡蛋、吃豆人、聊天框、图标等等。下面来看看怎么实现这些形状的吧。分为基本形状和组合形状来说，基本形状是比较容易实现的，而利用这些基本形状进行组合，就可以实现稍微复杂点的组合形状了。

心形

心形是由两个小药丸进行组合得到的。

image.png

image.png

/* 心形 */
.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%;
}

正方形

image.png

/* 正方形 */
.square {
    width: 100px;
    height: 100px;
    background: red;
}

八边形

八边形是由一个正方形和两个正反梯形进行组合得到的。

image.png

image.png

/* 八边形 */
.octagon {
    position: relative;
    width: 100px;
    height: 100px;
    background: red;
}
.octagon::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
    border-bottom: 29px solid red;
    width: 42px;
    height: 0;
}
.octagon::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
    border-top: 29px solid red;
    width: 42px;
    height: 0;
}

矩形

image.png

/* 矩形 */
.rectangle {
    width: 200px;
    height: 100px;
    background: red;
}

六边形

六边形是由一个矩形和两个正反三角形进行组合得到的。

image.png

image.png

/* 六边形 */
.hexagon {
    position: relative;
    width: 100px;
    height: 55px;
    background: red;
}
.hexagon::before {
    position: absolute;
    content: "";
    top: -25px;
    left: 0;
    border-left: 50px solid #fff;
    border-right: 50px solid #fff;
    border-bottom: 25px solid red;
    width: 0;
    height: 0;
}
.hexagon::after {
    position: absolute;
    content: "";
    bottom: -25px;
    left: 0;
    border-left: 50px solid #fff;
    border-right: 50px solid #fff;
    border-top: 25px solid red;
    width: 0;
    height: 0;
}

五边形

五边形是由一个三角形和一个倒梯形进行组合得到的。

image.png

image.png

/* 五边形 */
.pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
}
.pentagon::before {
    position: absolute;
    content: "";
    top: -85px;
    left: -18px;
    width: 0;
    height: 0;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
}

圆形

image.png

/* 圆形 */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: #4E6FA6;
}

border-radius 在低版本的 Android 不支持百分比

椭圆形

image.png

/* 椭圆形 */
.oval {
    width: 100px;
    height: 50px;
    border-radius: 100px / 50px;
    background: #4E6FA6;
}

border-radius: 100px / 50px;
等价于：
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
border-radius

五角星

image.png

/* 五角星 */
.star-five {
    margin: 25px 0;
    position: relative;
    display: block;
    color: #4E6FA6;
    width: 0px;
    height: 0px;
    border-right:  50px solid transparent;
    border-bottom: 35px  solid #4E6FA6;
    border-left:   50px solid transparent;
    transform: rotate(35deg);
 }
 .star-five::before {
    border-bottom: 40px solid #4E6FA6;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -22px;
    left: -32px;
    display: block;
    content: '';
    transform: rotate(-35deg);
 
 }
 .star-five::after {
    position: absolute;
    display: block;
    color: #4E6FA6;
    top: 2px;
    left: -52px;
    width: 0px;
    height: 0px;
    border-right: 50px solid transparent;
    border-bottom: 35px solid #4E6FA6;
    border-left: 50px solid transparent;
    transform: rotate(-70deg);
    content: '';
 }

六角星

六角星是由两个正反三角形重叠进行组合得到的。

image.png

/* 六角星 */
.star-six {
    position: relative;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #4E6FA6;
}

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

向上三角形

image.png

/* 向上三角形 */
.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #2BA245;
}

向下三角形

image.png

/* 向下三角形 */
.triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #2BA245;
}

向左三角形

image.png

/* 向左三角形 */
.triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 100px solid #2BA245;
}

向右三角形

image.png

/* 向右三角形 */
.triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 100px solid #2BA245;
}

左上三角形

image.png

/* 左上三角形 */
.triangle-topleft {
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-top: 100px solid #2BA245;
}

右上三角形

image.png

/* 右上三角形 */
.triangle-topright {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-top: 100px solid #2BA245;
}

左下三角形

image.png

/* 左下三角形 */
.triangle-bottomleft {
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-bottom: 100px solid #2BA245;
}

右下三角形

image.png

/* 右下三角形 */
.triangle-bottomright {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid #2BA245;
}

梯形

image.png

/* 梯形 */
.trapezoid {
    width: 100px;
    height: 0;
    border-bottom: 100px solid #2BA245;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

平行四边形

skew() 函数定义了一个元素在二维平面上的倾斜转换

image.png

/* 平行四边形 */
.parallelogram {
    width: 150px;
    height: 100px;
    transform: skew(30deg);
    background: #2BA245;
}

菱形

有正方形旋转45°而成

image.png

/* 菱形 */
.diamond {
    width: 100px;
    height: 100px;
    background: #F7DE1F;
    transform: rotate(45deg);
}

钻石盾牌

image.png

/* 钻石盾牌 */
.diamond-shield {
    position: relative;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 20px solid #F7DE1F;
    top: -50px;
}
.diamond-shield::after {
    position: absolute;
    content: "";
    top: 20px;
    left: -50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid #F7DE1F;
}

Diamond Narrow

由正反两个三角形组合而成

image.png

/* Diamond Narrow */
.diamond-narrow {
    position: relative;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 70px solid #F7DE1F;
    top: -50px;
}
.diamond-narrow::after {
    position: absolute;
    content: "";
    top: 70px;
    left: -50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid #F7DE1F;
}

钻石形

由上方一个梯形，下面一个三角形组合而成

image.png

/* 钻石形 */
.cut-diamond {
    position: relative;
    width: 50px;
    height: 0;
    border-style: solid;
    border-color: transparent transparent #F7DE1F transparent;
    border-width: 0 25px 25px 25px;
    margin: 20px 0 50px 0;
}
.cut-diamond::after {
    position: absolute;
    content: "";
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #F7DE1F transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

鸡蛋

image.png

/* 鸡蛋 */
.egg {
    display: block;
    width: 126px;
    height: 180px;
    background: #F7DE1F;
    border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
}

吃豆人

image.png

/* 吃豆人 */
.pacman {
    width: 0;
    height: 0;
    border: 60px solid #F7DE1F;
    border-right-color: transparent;
    border-radius: 60px;
}

聊天框

image.png

/* 聊天框 */
.talkbubble {
    position: relative;
    width: 120px;
    height: 80px;
    border-radius: 10px;
    background: #F7DE1F;
}
.talkbubble::after {
    position: absolute;
    content: "";
    top: 26px;
    right: 100%;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 26px solid #F7DE1F;
}

电视屏幕

image.png

/* 电视屏幕 */
.tv {
    position: relative;
    width: 200px;
    height: 150px;
    background: #F7DE1F;
    border-radius: 50% / 10%;
}
.tv::before {
    position: absolute;
    content: "";
    top: 10%;
    bottom: 10%;
    left: -5%;
    right: -5%;
    background: inherit;
    border-radius: 5% / 50%;
}

爆炸形状（12角）

原理：由三个正方形旋转而成，每个正方形在前一个图形的基础上旋转30°。

image.png

.burst-12 {
    position: relative;
}
.burst-12, .burst-12::before, .burst-12::after {
    width: 80px;
    height: 80px;
    background: #F48034;
}
.burst-12::before, .burst-12::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
}
.burst-12::before {
    transform: rotate(30deg);
}
.burst-12::after {
    transform: rotate(60deg);
}

阴阳八卦

原理：由对半颜色的圆形和两个小圆组合而成

image.png

将两个小圆垂直居中

image.png

image.png

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

放大镜

原理：由一个镂空的圆形和一个长方形组合而成

image.png

.magnifying-glass {
    position: relative;
    width: 40px;
    height: 40px;
    border: 10px solid #F48034;
    background: transparent;
    border-radius: 100%;
}
.magnifying-glass::before {
    position: absolute;
    content: "";
    right: -25px;
    bottom: -10px;
    width: 35px;
    height: 8px;
    background: #F48034;
    transform: rotate(45deg);
}

圆锥形

原理：使用 border 撑开，左边框和有边框设置成透明色，上边框设置主色

image.png

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

月亮

原理：设置透明的圆形，使用 box-shadow 属性绘制月牙

image.png

.moon {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    box-shadow: 15px 15px 0 0 #F48034;
}

十字架

原理：由两个横竖方向的长方形组合而成

image.png

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

徽章丝带

原理：由一个圆形，两个相反方向的三角形组合得到

image.png image.png image.png image.png

.badge-ribbon {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    /* background: #F48034; */
}
.badge-ribbon::before,
.badge-ribbon::after {
    position: absolute;
    content: "";
    top: 70px;
    left: -10px;
    border-bottom: 70px solid #F48034;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    transform: rotate(-140deg);
}

.badge-ribbon::after {
    left: auto;
    right: -10px;
    transform: rotate(140deg);
}

image.png

Discuss on Twitter • View on GitHub
使用 CSS 绘制形状 | Chengtszkong's Blog