用一个div及其伪类去完成各种css图形(The Shapes of CSS)

populus

css可以渲染各种图形。我们只需要设定一个块级元素最基础的widthheight属性值,就可以实现正方形、长方形。border-radius属性可以实现圆形、椭圆等,如果再加上伪类元素及其它属性,则又有更多可能。重点是我们要学会拆分,将复杂的图形拆为简单的四边形或三角形,还要计算好图形的边边角角该如何取值。

预览地址https://nidusp.github.io/css3-demo.github.io/

:root {
    --base: aqua;
    --normal: darkorange;
    --triangle: deepskyblue;
    --strange: forestgreen;
}
.wrapper {
    min-height: 100vh;
    background-color: var(--base);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

// 简单的四边形及border-radius属性变成的圆或椭圆
.square {
    width: 5rem;
    height: 5rem;
}

.rectangle {
    width: 6rem;
    height: 3rem;
}

.circle{
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
}

.oval {
    width: 6rem;
    height: 3rem;
    border-radius: 50%;
    border-radius: 3rem/ 1.5rem;
    border-radius: 3rem 3rem / 1.5rem 1.5rem;
}

// 伪类与标签垂直以绘制红十字
.cross {
    background-color: var(--normal);
    height: 5em;
    position: relative;
    width: 1em;
}
.cross::after {
    background-color: var(--normal);
    content: "";
    width: 5em;
    height: 1em;
    position: absolute;
    left: -2em;
    top: 2em;
}

.cone {
    width: 0;
    height: 0;
    border-left: 3.5em solid transparent;
    border-right: 3.5em solid transparent;
    border-top: 5em solid var(--normal);
    border-radius: 50%;
    background-color: transparent;
}


// 利用定位box-shadow属性画一个月亮
.moon {
    width: 5em;
    height: 5em;
    border-radius: 50%;
    box-shadow: 1em 1em 0 0  var(--normal);
    background-color: transparent;
}

// 利用标签画镜片,伪类画握把,组合成放大镜
.magnifying-glass {
    font-size: 10em;
    width: 0.4em;
    height: 0.4em;
    border: 0.1em solid var(--normal);
    position: relative;
    border-radius: 0.35em;
    background-color: transparent;
}
.magnifying-glass::before {
    content: "";
    position: absolute;
    right: -0.25em;
    bottom: -0.1em;
    background-color: var(--normal);
    width: 0.35em;
    height: 0.08em;
    transform: rotate(45deg);
}

.chevron {
    position: relative;
    text-align: center;
    padding: 12px;
    margin-bottom: 6px;
    height: 60px;
    width: 200px;
    background-color: transparent;
}
.chevron::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    background-color: var(--normal);
    transform: skew(0deg, 8deg);
}
.chevron::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    background-color: var(--normal);
    transform: skew(0deg, -8deg);
}

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



.base {
    background-color: var(--triangle);
    height: 2em;
    position: relative;
    width: 8em;
}
.base::before {
    border-bottom: 3em solid var(--triangle);
    border-left: 4em solid transparent;
    border-right: 4em solid transparent;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    top: -3em;
    width: 0;
}

.flag {
    width: 110px;
    height: 56px;
    box-sizing: content-box;
    padding-top: 15px;
    position: relative;
    background-color: var(--triangle);
}
.flag:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 13px solid var(--base);
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
}

.curvedarrow {
    position: relative;
    width: 0;
    height: 0;
    border-top: .75em solid transparent;
    border-right: .75em solid deeppink;
    transform: rotate(10deg);
    background-color: transparent;
}
.curvedarrow:after {
    content: "";
    position: absolute;
    border: 0 solid transparent;
    border-top: .25em solid deeppink;
    border-radius: 1em 0 0 0;
    top: -.9em;
    left: -0.6em;
    width: 1em;
    height: 1em;
    transform: rotate(45deg);
}

.trapezoid {
    border-bottom: 6em solid var(--triangle);
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
    height: 0;
    width: 6em;
    background-color: transparent;
    position: relative;
}
.trapezoid::after {
    content: "";
    height: 6em;
    width: 6em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallelogram {
    width: 150px;
    height: 100px;
    transform: skew(30deg);
    background-color: var(--strange);
}
.trapezoid::after {
    content: "";
    height: 6em;
    width: 6em;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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


.pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: sienna transparent;
    background-color: 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 sienna;
}

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


.octagon {
    width: 100px;
    height: 100px;
    color: black;
    background-color: currentColor;
    position: relative;
}
.octagon:before {
    content: "";
    width: 100px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid currentColor;
    border-left: 29px solid var(--base);
    border-right: 29px solid var(--base);
    box-sizing: border-box;
}
.octagon:after {
    content: "";
    width: 100px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid currentColor;
    border-left: 29px solid var(--base);
    border-right: 29px solid var(--base);
    box-sizing: border-box;
}


.heart {
    position: relative;
    width: 5em;
    height: 4em;
    background-color: transparent;
}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 2.5em;
    top: 0;
    width: 2.5em;
    height: 4em;
    background: darkred;
    border-radius: 2.5em 2.5em 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}


.egg {
    width: 6em;
    height: 8em;
    background-color: currentColor;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.pacman {
    width: 0;
    height: 0;
    color: black;
    border-right: 3.6em solid transparent;
    border-top: 3.6em solid currentColor;
    border-left: 3.6em solid currentColor;
    border-bottom: 3.6em solid currentColor;
    border-radius: 50%;
    background-color: var(--base);
}

.talkbubble {
    width: 8em;
    height: 6em;
    color: chartreuse;
    background-color: currentColor;
    border-radius: 10px;
    position: relative;
}
.talkbubble:before {
    content: "";
    position: absolute;
    right: 100%;
    top: 2em;
    width: 0;
    height: 0;
    border-top: 1em solid transparent;
    border-right: 2em solid currentColor;
    border-bottom: 1em solid transparent;
}

.burst-12 {
    color: var(--strange);
    background-color: currentColor;
    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-color: currentColor;
    transform: rotate(30deg);
}
.burst-12:after {
    transform: rotate(60deg);
}

.burst-8 {
    color: var(--strange);
    background-color: currentColor;
    width: 5em;
    height: 5em;
    position: relative;
    text-align: center;
    transform: rotate(20deg);
}
.burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: currentColor;
    transform: rotate(135deg);
    transform-origin: center center;
}

.badge-ribbon {
    position: relative;
    background-color: var(--strange);
    height: 6em;
    width: 6em;
    border-radius: 50%;
}
.badge-ribbon:before,
.badge-ribbon:after {
    content: '';
    position: absolute;
    border-bottom: 70px solid var(--strange);
    border-left: 2.5em solid transparent;
    border-right: 2.5em solid transparent;
    top: 70px;
    left: -10px;
    transform: rotate(-140deg);
}
.badge-ribbon:after {
    left: auto;
    right: -10px;
    transform: rotate(140deg);
}

利用border属性,渲染三角形

// 左右边透明,底边有颜色,则是向上的三角
.triangle-up {
    width: 0;
    height: 0;
    border-bottom: 6em solid var(--triangle);
    border-left: 3em solid transparent;
    border-right: 3em solid transparent;
    background-color: transparent;
}
// 左右边透明,顶边有颜色,则是向下的三角
.triangle-down {
    width: 0;
    height: 0;
    border-top: 6em solid var(--triangle);
    border-left: 3em solid transparent;
    border-right: 3em solid transparent;
    background-color: transparent;
}
// 上下边透明,右边有颜色,则是向左的三角
.triangle-left {
    width: 0;
    height: 0;
    border-top: 3em solid transparent;
    border-bottom: 3em solid transparent;
    border-right: 6em solid var(--triangle);
    background-color: transparent;
}
// 上下边透明,左边有颜色,则是向右的三角
.triangle-right {
    width: 0;
    height: 0;
    border-top: 3em solid transparent;
    border-bottom: 3em solid transparent;
    border-left: 6em solid var(--triangle);
    background-color: transparent;
}


// 一边透明,任一邻边有颜色,则是直角三角形
.triangle-topleft {
    width: 0;
    height: 0;
    border-top: 5em solid var(--triangle);
    border-right: 5em solid transparent;
    background-color: transparent;
}
.triangle-topright {
    width: 0;
    height: 0;
    border-top: 5em solid var(--triangle);
    border-left: 5em solid transparent;
    background-color: transparent;
}
.triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 5em solid var(--triangle);
    border-left: 5em solid transparent;
    background-color: transparent;
}
.triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 5em solid var(--triangle);
    border-right: 5em solid transparent;
    background-color: transparent;
}

三角形拼接成菱形等各种形状

.pointer {
    width: 200px;
    height: 40px;
    position: relative;
    background-color: var(--strange);
}
.pointer:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid var(--base);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.pointer::before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid  var(--strange);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

//
.diamond {
    color:  var(--triangle);
    width: 0;
    height: 0;
    border: 3.5em solid transparent;
    border-bottom-color: currentColor;
    position: relative;
    top: -3.5em;
    background-color: transparent;
}
.diamond:after {
    content: '';
    position: absolute;
    left: -3.5em;
    top: 3.5em;
    width: 0;
    height: 0;
    border: 3.5em solid transparent;
    border-top-color: currentColor;
}

//
.diamond-shield {
    color:  var(--triangle);
    width: 0;
    height: 0;
    border: 3em solid transparent;
    border-bottom: 1em solid;
    position: relative;
    top: -3em;
    background-color: transparent;
}
.diamond-shield::after {
    content: '';
    position: absolute;
    left: -3em;
    top: 1em;
    width: 0;
    height: 0;
    border: 3em solid transparent;
    border-top: 4.5em solid;
}

.diamond-narrow {
    width: 0;
    height: 0;
    color:  var(--triangle);
    border: 3em solid transparent;
    border-bottom: 4em solid;
    position: relative;
    top: -3em;
    background-color: transparent;
}
.diamond-narrow:after {
    content: '';
    position: absolute;
    left: -3em;
    top: 4em;
    width: 0;
    height: 0;
    border: 3em solid transparent;
    border-top: 4em solid;
}

// 梯形+三角形=钻石形状
.cut-diamond {
    margin-top: -3em;
    color: var(--triangle);
    border-style: solid;
    border-color: transparent transparent currentColor transparent;
    border-width: 0 2em 2em 2em;
    height: 0;
    width: 4em;
    position: relative;
    background-color: transparent;
}
.cut-diamond::after {
    content: "";
    position: absolute;
    top: 2em;
    left: -2em;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: currentColor transparent transparent transparent;
    border-width: 6em 4em 0 4em;
}

利用伪类与标签的搭配,形成各种图案

无穷符号∞

很简单,就是伪类渲染两个对称的半圆及直角拼接在一起。调整好值即可

.infinity {
    position: relative;
    width: 11em;
    height: 6em;
    background-color: transparent;
}
.infinity:before,
.infinity:after {
    content: "";
    box-sizing: content-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 3em;
    height: 3em;
    border: 1em solid #000;
    border-radius: 2.5em 2.5em 0 2.5em;
    transform: rotate(-45deg);
}
.infinity:after {
    left: auto;
    right: 0;
    border-radius: 2.5em 2.5em 2.5em 0;
    transform: rotate(45deg);
}

facebook-icon

主体是一个“f”字母,再加一个背景即可

// 利用伪类画一个“f”,错位形成“facebook-icon”
.facebook-icon {
    background-color: var(--normal);
    text-indent: -999em;
    width: 6em;
    height: 6.5em;
    border-radius: .5em;
    position: relative;
    overflow: hidden;
    border: 1em solid var(--normal);
    border-bottom: 0;
}
.facebook-icon::before {
    content: "";
    position: absolute;
    background-color: var(--normal);
    width: 2.5em;
    height: 5.6em;
    bottom: -1.8em;
    right: -2.2em;
    border: 1.25em solid #eee;
    border-radius: 1.5em;
}

.facebook-icon::after {
    content: "";
    position: absolute;
    top: 2.8em;
    width: 3.6em;
    height: 1.2em;
    background: #eee;
    right: .2em;
}

画一个锁

利用border-radius画一个半圆作为锁头,再画一个锁芯

.lock {
    font-size: .35rem;
    position: relative;
    width: 18em;
    height: 13em;
    border-radius: 2em;
    top: 10em;
    box-sizing: border-box;
    border: 3.5em solid var(--strange);
    border-right-width: 7.5em;
    border-left-width: 7.5em;
    margin: 0 0 6rem 0;
    background-color: transparent;
}
.lock::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: 2.5em solid var(--strange);
    width: 14em;
    height: 12em;
    left: 50%;
    margin-left: -7em;
    top: -12em;
    border-top-left-radius: 7em;
    border-top-right-radius: 7em;
}
.lock::after {
    content: "?";
    box-sizing: border-box;
    position: absolute;
    border: 1em solid var(--strange);
    width: 5em;
    height: 8em;
    border-radius: 2.5em;
    left: 50%;
    top: -1em;
    margin-left: -2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

阴阳太极图

重点是利用两个伪类分别渲染两极的“小圆”及“中心”,还有标签border-colorbackground-color的属性渲染两极。


.yin-yang {
    width: 6em;
    height: 3em;
    background-color: #fff;
    color: #000;
    border: 0em solid;
    border-bottom-width: 3em;
    border-radius: 100%;
    position: relative;
}
// 伪类渲染的两点只是颜色及位置不同,所以写在一起
.yin-yang::before, .yin-yang::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #fff;
    border: 1.1em solid currentColor;
    border-radius: 50%;
    width: .8em;
    height: .8em;
}
.yin-yang::after {
    left: 50%;
    background-color: currentColor;
    border: 1.1em solid #fff;
}

太空侵略者

利用box-shadow形成“像素点”,调整位置形成最终结果。也可渲染其它各种的像素点图。

.space-invader {
    box-shadow: 0 0 0 1em var(--strange),
    0 1em 0 1em var(--strange),
    -2.5em 1.5em 0 .5em currentColor,
    2.5em 1.5em 0 .5em currentColor,
    -3em -3em 0 0 currentColor,
    3em -3em 0 0 currentColor,
    -2em -2em 0 0 currentColor,
    2em -2em 0 0 currentColor,
    -3em -1em 0 0 currentColor,
    -2em -1em 0 0 currentColor,
    2em -1em 0 0 currentColor,
    3em -1em 0 0 currentColor,
    -4em 0 0 0 currentColor,
    -3em 0 0 0 currentColor,
    3em 0 0 0 currentColor,
    4em 0 0 0 currentColor,
    -5em 1em 0 0 currentColor,
    -4em 1em 0 0 currentColor,
    4em 1em 0 0 currentColor,
    5em 1em 0 0 currentColor,
    -5em 2em 0 0 currentColor,
    5em 2em 0 0 currentColor,
    -5em 3em 0 0 currentColor,
    -3em 3em 0 0 currentColor,
    3em 3em 0 0 currentColor,
    5em 3em 0 0 currentColor,
    -2em 4em 0 0 currentColor,
    -1em 4em 0 0 currentColor,
    1em 4em 0 0 currentColor,
    2em 4em 0 0 currentColor;
    background: currentColor;
    margin: 3em 6em;
    width: 1em;
    height: 1em;
    color: var(--strange);
    overflow: hidden;
}

// RSS,一个伪类渲染圆点,另一伪类渲染两条弧线

.rss {
    width: 20em;
    height: 20em;
    border-radius: 3em;
    color: deepskyblue;
    background-color: currentColor;
    font-size: .25em;
    position: relative;
}
.rss:before {
    content: '';
    z-index: 1;
    display: block;
    height: 5em;
    width: 5em;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 11.5em;
    left: 3.5em;
}
//  box-shadow 三个inset值错位渲染弧线
.rss:after {
    content: '';
    display: block;
    background: currentColor;
    width: 13em;
    height: 13em;
    top: 3em;
    left: 3.8em;
    border-radius: 2.5em;
    position: absolute;
    box-shadow:
            -2em 2em 0 0 #fff inset,
            -4em 4em 0 0 currentColor inset,
            -6em 6em 0 0 #fff inset
}

源自the-shapes-of-css

阅读 622

万春园里误春期——前端之路
以前的学习中,总是去网上查看他人的博客或者文章,零零散散也在其他地方写过自己的博客。在此一个专栏...

不断学习、努力工作、热爱技术

245 声望
1 粉丝
0 条评论
你知道吗?

不断学习、努力工作、热爱技术

245 声望
1 粉丝
宣传栏