利用CSS进行各种图形的绘制

来源：互联网发布：网站建设优化及推广编辑：程序博客网时间：2024/05/22 05:28

<body>        <div id="square"></div>        <!--正方形-->        <div id="rectangle"></div>        <!--长方形-->        <div id="circle"></div>        <!--圆-->        <div id="oval"></div>        <!--椭圆-->        <div id="triangle_up"></div>        <!--向上的等腰直角三角形-->        <div id="triangle_right"></div>        <!--向右的等腰直角三角形-->        <div id="triangle_bottom"></div>        <!--向下的等腰直角三角形-->        <div id="triangle_left"></div>        <!--向左的等腰直角三角形-->        <div id="triangle_db_up"></div>        <!--向上的等边三角形-->        <div id="triangle_db_right"></div>        <!--向右的等边三角形-->        <div id="triangle_db_bottom"></div>        <!--向下的等边三角形-->        <div id="triangle_db_left"></div>        <!--向左的等边三角形-->        <div id="triangle_top_left"></div>        <!--右上为直角边-->        <div id="triangle_top_right"></div>        <!--左上为直角边-->        <div id="triangle_bottom_left"></div>        <!--下右为直角边-->        <div id="triangle_bottom_right"></div>        <!--下左为直角边-->        <div id="trapezoid"></div>        <!--等腰梯形-->        <div id="parallelogram"></div>        <!--平行四边形-->        <div id="star-six"></div>        <!--六角星-->        <div id="star-five"></div>        <!--五角星-->        <div id="pentagon"></div>        <!--五边形-->        <div id="hexagon"></div>        <!--六边形-->        <div id="octagon"></div>        <!--八边形-->        <div id="heart"></div>        <!--心-->        <div id="infinity"></div>        <!--无穷大-->        <div id="diamond"></div>        <!--菱形-->        <div id="diamond-shield"></div>        <div id="diamond-narrow"></div>        <div id="cut-diamond"></div>        <!--钻石-->        <div id="egg"></div>        <!--鸡蛋-->        <div id="talkbubble"></div>        <!--对话框-->        <div id="yin-yang"></div>        <!--阴阳图-->        <div id="magnifying-glass"></div>        <!--搜索图标-->        <div id="moon"></div>        <!--月亮-->    </body>

正方形

#square {                width: 100px;                height: 100px;                background-color: deepskyblue;            }

这里写图片描述

长方形

#rectangle {                width: 200px;                height: 100px;                background-color: deepskyblue;            }

这里写图片描述

圆形

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

这里写图片描述

椭圆

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

等腰直角三角形

#triangle_up {                width: 0px;                height: 0px;                border: 50px solid transparent;                border-bottom-color: deepskyblue;            }

向上的等腰直角三角形

#triangle_right {                width: 0px;                height: 0px;                border: 50px solid transparent;                border-left-color: deepskyblue;            }

向右的等腰直角三角形

#triangle_bottom {                width: 0px;                height: 0px;                border: 50px solid transparent;                border-top-color: deepskyblue;            }

向下的等腰直角三角形

#triangle_left {                width: 0px;                height: 0px;                border: 50px solid transparent;                border-right-color: deepskyblue;            }

向左的等腰直角三角形

等边三角形

#triangle_db_up {                width: 0px;                height: 0px;                border: 50px solid transparent;                border-bottom: 100px solid deepskyblue;            }

向上的等边三角形

#triangle_db_right {                width: 0px;                height: 0px;                border: 50px solid transparent;                border-left: 100px solid deepskyblue;            }

向右的等边三角形

#triangle_db_bottom {                width: 0px;                height: 0px;                border: 50px solid transparent;                border-top: 100px solid deepskyblue;            }

向下的等边三角形

#triangle_db_left {                width: 0px;                height: 0px;                border: 50px solid transparent;                border-right: 100px solid deepskyblue;            }

向左的等边三角形

直角三角形

#triangle_top_left {                width: 0px;                height: 0px;                border-right: 100px solid deepskyblue;                border-top: 100px solid transparent;            }

这里写图片描述

#triangle_top_right {                width: 0px;                height: 0px;                border-top: 100px solid transparent;                border-left: 100px solid deepskyblue;            }

这里写图片描述

#triangle_bottom_left {                width: 0px;                height: 0px;                border-bottom: 100px solid deepskyblue;                border-right: 100px solid transparent;            }

这里写图片描述

#triangle_bottom_right {                width: 0px;                height: 0px;                border-bottom: 100px solid transparent;                border-left: 100px solid deepskyblue;            }

这里写图片描述

等腰梯形

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

这里写图片描述

平行四边形

#parallelogram {                width: 150px;                height: 100px;                -webkit-transform: skew(20deg);                -moz-transform: skew(20deg);                -o-transform: skew(20deg);                background-color: deepskyblue;            }

这里写图片描述

六角形

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

这里写图片描述

五角星

#star-five {                margin: 250px 0;                position: relative;                display: block;                color: deepskyblue;                width: 0px;                height: 0px;                border-right: 100px solid transparent;                border-bottom: 70px solid deepskyblue;                border-left: 100px solid transparent;                -moz-transform: rotate(35deg);                -webkit-transform: rotate(35deg);                -ms-transform: rotate(35deg);                -o-transform: rotate(35deg);            }            #star-five:before {                border-bottom: 80px solid deepskyblue;                border-left: 30px solid transparent;                border-right: 30px solid transparent;                position: absolute;                height: 0;                width: 0;                top: -45px;                left: -65px;                display: block;                content: '';                -webkit-transform: rotate(-35deg);                -moz-transform: rotate(-35deg);                -ms-transform: rotate(-35deg);                -o-transform: rotate(-35deg);            }            #star-five:after {                position: absolute;                display: block;                color: deepskyblue;                top: 3px;                left: -105px;                width: 0px;                height: 0px;                border-right: 100px solid transparent;                border-bottom: 70px solid deepskyblue;                border-left: 100px solid transparent;                -webkit-transform: rotate(-70deg);                -moz-transform: rotate(-70deg);                -ms-transform: rotate(-70deg);                -o-transform: rotate(-70deg);                content: '';            }

这里写图片描述

五边形

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

这里写图片描述

六边形

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

这里写图片描述

八边形

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

这里写图片描述

心

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

这里写图片描述

无穷大

#infinity {                position: relative;                width: 212px;                height: 100px;            }            #infinity:before,            #infinity:after {                content: "";                position: absolute;                top: 0;                left: 0;                width: 60px;                height: 60px;                border: 20px solid deepskyblue;                -moz-border-radius: 50px 50px 0 50px;                border-radius: 50px 50px 0 50px;                -webkit-transform: rotate(-45deg);                -moz-transform: rotate(-45deg);                -ms-transform: rotate(-45deg);                -o-transform: rotate(-45deg);                transform: rotate(-45deg);            }            #infinity:after {                left: auto;                right: 0;                -moz-border-radius: 50px 50px 50px 0;                border-radius: 50px 50px 50px 0;                -webkit-transform: rotate(45deg);                -moz-transform: rotate(45deg);                -ms-transform: rotate(45deg);                -o-transform: rotate(45deg);                transform: rotate(45deg);            }

这里写图片描述

菱形

#diamond {                width: 0;                height: 0;                border: 50px solid transparent;                border-bottom-color: deepskyblue;                position: relative;                top: -50px;            }            #diamond:after {                content: '';                position: absolute;                left: -50px;                top: 50px;                width: 0;                height: 0;                border: 50px solid transparent;                border-top-color: deepskyblue;            }

这里写图片描述

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

这里写图片描述

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

这里写图片描述

钻石

#cut-diamond {                border-style: solid;                border-color: transparent transparent deepskyblue transparent;                border-width: 0 25px 25px 25px;                height: 0;                width: 50px;                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: deepskyblue transparent transparent transparent;                border-width: 70px 50px 0 50px;            }

这里写图片描述

鸡蛋

#egg {                display: block;                width: 126px;                height: 180px;                background-color: deepskyblue;                -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;                border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;            }

这里写图片描述

对话框

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

这里写图片描述

阴阳图

#yin-yang {                width: 96px;                height: 48px;                background: #eee;                border-color: deepskyblue;                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 deepskyblue;                border-radius: 100%;                width: 12px;                height: 12px;            }            #yin-yang:after {                content: "";                position: absolute;                top: 50%;                left: 50%;                background: deepskyblue;                border: 18px solid #eee;                border-radius: 100%;                width: 12px;                height: 12px;            }

这里写图片描述

搜索图标

#magnifying-glass {                font-size: 10em;                /* This controls the size. */                display: inline-block;                width: 0.4em;                height: 0.4em;                border: 0.1em solid deepskyblue;                position: relative;                border-radius: 0.35em;            }            #magnifying-glass::before {                content: "";                display: inline-block;                position: absolute;                right: -0.25em;                bottom: -0.1em;                border-width: 0;                background: deepskyblue;                width: 0.35em;                height: 0.08em;                -webkit-transform: rotate(45deg);                -moz-transform: rotate(45deg);                -ms-transform: rotate(45deg);                -o-transform: rotate(45deg);            }

这里写图片描述

月亮

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

这里写图片描述

阅读全文

1 0