花样形状 -- CSS

最新推荐文章于 2024-04-23 11:04:30 发布

bestvist

最新推荐文章于 2024-04-23 11:04:30 发布

阅读量485

点赞数

分类专栏： css 文章标签： css shape css3

本文链接：https://blog.csdn.net/qq_38082661/article/details/82192405

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

只使用一个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 ^ _ ^ *

bestvist

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
花样形状 -- CSS

只使用一个html元素绘制图形，部分图形需要浏览器支持正方形 Square #square { width: 100px; height: 100px; background: dodgerblue; }长方形 Rectangle #rectangle...
复制链接

扫一扫