花样形状 -- CSS

Warren 发布于2019-08-29 16:31 / 956人阅读

摘要：只使用一个元素绘制图形，部分图形需要浏览器支持正方形长方形圆形椭圆形三角形向上三角形向下三角形向左三角形向右三角形左上角三角形右上角三角形左下角三角形右下角曲箭头梯形

只使用一个html元素绘制图形，部分图形需要浏览器支持

正方形 Square

        #square {
            width: 100px;
            height: 100px;
            background: dodgerblue;
        }

长方形 Rectangle

        #rectangle {
            width: 200px;
            height: 100px;
            background: dodgerblue;
        }

圆形 Circle

        #circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: dodgerblue;
        }

椭圆形 Oval

        #oval {
            width: 200px;
            height: 100px;
            border-radius: 50%;
            background: dodgerblue;
        }

三角形向上 Triangle Up

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

三角形向下 Triangle Down

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

三角形向左 Triangle Left

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

三角形向右 Triangle Right

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

三角形左上角 Triangle Top Left

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

三角形右上角 Triangle Top Right

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

三角形左下角 Triangle Bottom Left

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

三角形右下角 Triangle Bottom Right

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

曲箭头 Curved Tail Arrow

        #curvedarrow {
            position: relative;
            width: 0;
            height: 0;
            margin-left: 20px;
            border-top: 9px solid transparent;
            border-right: 9px solid dodgerblue;
            transform: rotate(10deg);
        }

        #curvedarrow:after {
            content: "";
            position: absolute;
            top: -12px;
            left: -9px;
            width: 12px;
            height: 12px;
            border: 0 solid transparent;
            border-top: 3px solid dodgerblue;
            border-radius: 20px 0 0 0;
            transform: rotate(45deg);
        }

梯形 Trapezoid

        #trapezoid {
            width: 100px;
            height: 0;
            border-bottom: 100px solid dodgerblue;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

平行四边形 Parallelogram

        #parallelogram {
            width: 150px;
            height: 100px;
            margin-left: 20px;
            transform: skew(20deg);
            background: dodgerblue;
        }

星形(6点) Star (6-points)

        #star-six {
            position: relative;
            width: 0;
            height: 0;
            margin-bottom: 40px;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid dodgerblue;
        }

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

星形(5点) Star (5-points)

        #star-five {
            display: block;
            position: relative;
            width: 0px;
            height: 0px;
            margin: 50px 0;
            border-right: 50px solid transparent;
            border-bottom: 35px solid dodgerblue;
            border-left: 50px solid transparent;
            color: dodgerblue;
            transform: rotate(35deg);
        }

        #star-five:before {
            content: "";
            display: block;
            position: absolute;
            top: -22.5px;
            left: -32.5px;
            height: 0;
            width: 0;
            border-bottom: 40px solid dodgerblue;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            transform: rotate(-35deg);
        }

        #star-five:after {
            content: "";
            display: block;
            position: absolute;
            top: 1.5px;
            left: -52.5px;
            width: 0px;
            height: 0px;
            border-right: 50px solid transparent;
            border-bottom: 35px solid dodgerblue;
            border-left: 50px solid transparent;
            color: dodgerblue;
            transform: rotate(-70deg);
        }

五角形 Pentagon

        #pentagon {
            position: relative;
            width: 54px;
            margin-top: 40px;
            border-width: 50px 18px 0;
            border-style: solid;
            border-color: dodgerblue transparent;
                        box-sizing: content-box;
        }

        #pentagon:before {
            content: "";
            position: absolute;
            top: -85px;
            left: -18px;
            height: 0;
            width: 0;
            border-width: 0 45px 35px;
            border-style: solid;
            border-color: transparent transparent dodgerblue;
        }

六角形 Hexagon

        #hexagon {
            position: relative;
            width: 100px;
            height: 55px;
            margin: 40px 0;
            background: dodgerblue;
        }

        #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 dodgerblue;
        }

        #hexagon:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -25px;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 25px solid dodgerblue;
        }

八角形 Octagon

        #octagon {
            position: relative;
            width: 100px;
            height: 100px;
            background: dodgerblue;
                        box-sizing: content-box;
        }

        #octagon:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 42px;
            height: 0;
            border-bottom: 29px solid dodgerblue;
            border-left: 29px solid white;
            border-right: 29px solid white;
                        box-sizing: content-box;
        }

        #octagon:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 42px;
            height: 0;
            border-top: 29px solid dodgerblue;
            border-left: 29px solid white;
            border-right: 29px solid white;
                        box-sizing: content-box;
        }

心形 Heart

        #heart {
            position: relative;
            width: 100px;
            height: 90px;
        }

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

        #heart:after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }

无限形 Infinity

        #infinity {
            position: relative;
            width: 212px;
            height: 100px;
                        box-sizing: content-box;
        }

        #infinity:before,
        #infinity:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 60px;
            height: 60px;
            border: 20px solid dodgerblue;
            border-radius: 50px 50px 0 50px;
            transform: rotate(-45deg);
                        box-sizing: content-box;
        }

        #infinity:after {
            left: auto;
            right: 0;
            border-radius: 50px 50px 50px 0;
            transform: rotate(45deg);
        }

菱形 Diamond

        #diamond {
            position: relative;
            top: -50px;
            width: 0;
            height: 0;
                        margin: 20px;
            border: 50px solid transparent;
            border-bottom-color: dodgerblue;
        }

        #diamond:after {
            content: "";
            position: absolute;
            left: -50px;
            top: 50px;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top-color: dodgerblue;
        }

菱形(窄) Diamond Narrow

        #diamond-narrow {
            position: relative;
            top: -50px;
            width: 0;
            height: 0;
                        margin: 20px;
            border: 50px solid transparent;
            border-bottom: 70px solid dodgerblue;
        }

        #diamond-narrow:after {
            content: "";
            position: absolute;
            top: 70px;
            left: -50px;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top: 70px solid dodgerblue;
        }

菱形(盾) Diamond Shield

        #diamond-shield {
            position: relative;
            top: -50px;
            width: 0;
            height: 0;
            margin-bottom: 20px;
            border: 50px solid transparent;
            border-bottom: 20px solid dodgerblue;
        }

        #diamond-shield:after {
            content: "";
            position: absolute;
            top: 20px;
            left: -50px;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top: 70px solid dodgerblue;
        }

钻石 Diamond

        #cut-diamond {
            position: relative;
            width: 50px;
            height: 0;
            margin: 20px 0 80px 0;
            border-style: solid;
            border-color: transparent transparent dodgerblue transparent;
            border-width: 0 25px 25px 25px;
                        box-sizing: content-box;
        }

        #cut-diamond:after {
            content: "";
            position: absolute;
            top: 25px;
            left: -25px;
            width: 0;
            height: 0;
            border-style: solid;
            border-color: dodgerblue transparent transparent transparent;
            border-width: 70px 50px 0 50px;
        }

蛋形 Egg

        #egg {
            display: block;
            width: 120px;
            height: 150px;
                        margin: 20px;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            background-color: dodgerblue;
        }

食豆小子 Pac-Man

        #pacman {
            width: 0px;
            height: 0px;
                        margin: 20px;
            border-right: 60px solid transparent;
            border-top: 60px solid dodgerblue;
            border-left: 60px solid dodgerblue;
            border-bottom: 60px solid dodgerblue;
            border-top-left-radius: 60px;
            border-top-right-radius: 60px;
            border-bottom-left-radius: 60px;
            border-bottom-right-radius: 60px;
        }

谈话泡 Talk Bubble

        #talkbubble {
            position: relative;
            width: 120px;
            height: 80px;
            margin: 30px;
            border-radius: 10px;
            background: dodgerblue;
        }

        #talkbubble:before {
            content: "";
            position: absolute;
            right: 100%;
            top: 26px;
            width: 0;
            height: 0;
            border-top: 13px solid transparent;
            border-right: 26px solid dodgerblue;
            border-bottom: 13px solid transparent;
        }

爆炸(12点) Burst(12-points)

        #burst-12 {
            position: relative;
            width: 80px;
            height: 80px;
            margin: 20px;
            text-align: center;
            background: dodgerblue;
        }

        #burst-12:before,
        #burst-12:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 80px;
            width: 80px;
            background: dodgerblue;
        }

        #burst-12:before {
            transform: rotate(30deg);
        }

        #burst-12:after {
            transform: rotate(60deg);
        }

爆炸(8点) Burst(8-points)

        #burst-8 {
            position: relative;
            width: 80px;
            height: 80px;
            margin: 20px;
            text-align: center;
            background: dodgerblue;
            transform: rotate(20deg);
        }

        #burst-8:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 80px;
            width: 80px;
            background: dodgerblue;
            transform: rotate(135deg);
        }

太极 Tai Chi

        #yin-yang {
            position: relative;
            width: 96px;
            height: 48px;
            background: white;
            border-width: 2px 2px 50px 2px;
            border-style: solid;
            border-color: dodgerblue;
            border-radius: 100%;
                        box-sizing: content-box;
        }

        #yin-yang:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 12px;
            height: 12px;
            border: 18px solid dodgerblue;
            border-radius: 100%;
            background: white;
                        box-sizing: content-box;
        }

        #yin-yang:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 12px;
            height: 12px;
            border: 18px solid white;
            border-radius: 100%;
            background: dodgerblue;
                        box-sizing: content-box;
        }

徽章 Badge Ribbon

        #badge-ribbon {
            position: relative;
            width: 100px;
            height: 100px;
            margin-bottom: 40px;
            border-radius: 50px;
            background: dodgerblue;
        }

        #badge-ribbon:before,
        #badge-ribbon:after {
            content: "";
            position: absolute;
            top: 70px;
            left: -10px;
            border-bottom: 70px solid dodgerblue;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            transform: rotate(-140deg);
        }

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

太空侵略者 Space Invader

        #space-invader {
            width: 1em;
            height: 1em;
            margin: 70px 20px 90px 85px;
            overflow: hidden;
            background: dodgerblue;
            box-shadow: 0 0 0 1em dodgerblue,
            0 1em 0 1em dodgerblue,
            -2.5em 1.5em 0 .5em dodgerblue,
            2.5em 1.5em 0 .5em dodgerblue,
            -3em -3em 0 0 dodgerblue,
            3em -3em 0 0 dodgerblue,
            -2em -2em 0 0 dodgerblue,
            2em -2em 0 0 dodgerblue,
            -3em -1em 0 0 dodgerblue,
            -2em -1em 0 0 dodgerblue,
            2em -1em 0 0 dodgerblue,
            3em -1em 0 0 dodgerblue,
            -4em 0 0 0 dodgerblue,
            -3em 0 0 0 dodgerblue,
            3em 0 0 0 dodgerblue,
            4em 0 0 0 dodgerblue,
            -5em 1em 0 0 dodgerblue,
            -4em 1em 0 0 dodgerblue,
            4em 1em 0 0 dodgerblue,
            5em 1em 0 0 dodgerblue,
            -5em 2em 0 0 dodgerblue,
            5em 2em 0 0 dodgerblue,
            -5em 3em 0 0 dodgerblue,
            -3em 3em 0 0 dodgerblue,
            3em 3em 0 0 dodgerblue,
            5em 3em 0 0 dodgerblue,
            -2em 4em 0 0 dodgerblue,
            -1em 4em 0 0 dodgerblue,
            1em 4em 0 0 dodgerblue,
            2em 4em 0 0 dodgerblue;
        }

TV形 TV Screen

        #tv {
            position: relative;
            width: 150px;
            height: 100px;
            margin: 20px;
            text-align: center;
            text-indent: .1em;
            background: dodgerblue;
            border-radius: 50% / 10%;
            color: white;
        }

        #tv:before {
            content: "";
            position: absolute;
            top: 10%;
            bottom: 10%;
            right: -5%;
            left: -5%;
            border-radius: 5% / 50%;
            background: inherit;
        }

臂章 Chevron

        #chevron {
            position: relative;
            width: 150px;
            height: 60px;
                        margin: 20px;
        }

        #chevron:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 51%;
            height: 100%;
            background: dodgerblue;
            transform: skew(0deg, 6deg);
        }

        #chevron:after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background: dodgerblue;
            transform: skew(0deg, -6deg);
        }

放大镜 Magnifying Glass

        #magnifying-glass {
            display: inline-block;
            position: relative;
            width: 0.4em;
            height: 0.4em;
                        margin: 0.1em;
            border: 0.1em solid dodgerblue;
            border-radius: 0.35em;
            font-size: 10em;
                        box-sizing: content-box;
        }

        #magnifying-glass::before {
            content: "";
            display: inline-block;
            position: absolute;
            right: -0.25em;
            bottom: -0.1em;
            width: 0.35em;
            height: 0.08em;
            border-width: 0;
            background: dodgerblue;
            transform: rotate(45deg);
        }

月亮 Moon

        #moon {
            width: 80px;
            height: 80px;
                        margin: 20px;
            border-radius: 50%;
            box-shadow: 15px 15px 0 0 dodgerblue;
        }

旗帜 Flag

        #flag {
            position: relative;
            width: 110px;
            height: 56px;
                        margin: 20px;
            padding-top: 15px;
            font-size: 11px;
            letter-spacing: 0.2em;
            text-align: center;
            text-transform: uppercase;
            color: white;
            background: dodgerblue;
                        box-sizing: content-box;
        }

        #flag:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 0;
            border-bottom: 13px solid white;
            border-left: 55px solid transparent;
            border-right: 55px solid transparent;
        }

锥体 Cone

        #cone {
            width: 0;
            height: 0;
                        margin: 20px;
            border-left: 70px solid transparent;
            border-right: 70px solid transparent;
            border-top: 100px solid dodgerblue;
            border-radius: 50%;
        }

十字架 Cross

        #cross {
            position: relative;
            width: 20px;
            height: 100px;
            margin: 20px 50px;
            background: dodgerblue;
        }

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

基地 Base

        #base {
            display: inline-block;
            position: relative;
            width: 100px;
            height: 55px;
            margin-left: 20px;
            margin-top: 35px;
            background: dodgerblue;
        }

        #base:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            top: -35px;
            left: 0;
            border-bottom: 35px solid dodgerblue;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

指针 Pointer

        #pointer {
            position: relative;
            width: 200px;
            height: 40px;
                        margin: 20px;
            background: dodgerblue;
        }

        #pointer:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 0;
            border-left: 20px solid white;
            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 dodgerblue;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
        }

原文链接：http://www.bestvist.com/p/58
原文有效果更直观呦
GitHub地址欢迎star ^ _ ^

GPU云服务器云服务器花样新花样形状形状匹配

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113795.html

花样形状 -- CSS

摘要：只使用一个元素绘制图形，部分图形需要浏览器支持正方形长方形圆形椭圆形三角形向上三角形向下三角形向左三角形向右三角形左上角三角形右上角三角形左下角三角形右下角曲箭头梯形只使用一个html元素绘制图形，部分图形需要浏览器支持正方形 Square #square { width: 100px; height: 100px; ...

crelaber 2019-08-02 16:31 评论0 收藏0
大话深度学习2：折磨了那么多只猫，还得了诺贝尔奖？

摘要：深度学习猫铲屎官们也是纳了闷了高冷的深度学习与呆萌的猫星人能有什么关系然而，他俩不仅有关系，而且还关系匪浅还记得吗它在年训练了一种名为深度神经网络的机器学习模型通过不断输入小猫的图片，系统竟然可以认得猫了关键是小组成员并没有直接输入猫的特征深度学习&猫？铲屎官们也是纳了闷了高冷的深度学习与呆萌的猫星人能有什么关系然而，他俩不仅有关系，而且还关系匪浅还记得Google Brain吗它在201...

happyhuangjinjin 2019-04-25 18:04 评论0 收藏0