国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

花樣形狀 -- CSS

crelaber / 2774人閱讀

摘要：只使用一個元素繪制圖形，部分圖形需要瀏覽器支持正方形長方形圓形橢圓形三角形向上三角形向下三角形向左三角形向右三角形左上角三角形右上角三角形左下角三角形右下角曲箭頭梯形

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/55076.html

相關文章

  • 花樣形狀 -- CSS

    摘要：只使用一個元素繪制圖形，部分圖形需要瀏覽器支持正方形長方形圓形橢圓形三角形向上三角形向下三角形向左三角形向右三角形左上角三角形右上角三角形左下角三角形右下角曲箭頭梯形 只使用一個html元素繪制圖形，部分圖形需要瀏覽器支持 正方形 Square #square { width: 100px; height: 100px; ...

    Warren 評論0 收藏0

  • 大話深度學習2：折磨了那么多只貓，還得了諾貝爾獎？

    摘要：深度學習貓鏟屎官們也是納了悶了高冷的深度學習與呆萌的貓星人能有什么關系然而，他倆不僅有關系，而且還關系匪淺還記得嗎它在年訓練了一種名為深度神經網絡的機器學習模型通過不斷輸入小貓的圖片，系統竟然可以認得貓了關鍵是小組成員并沒有直接輸入貓的特征 深度學習&貓？鏟屎官們也是納了悶了高冷的深度學習與呆萌的貓星人能有什么關系然而，他倆不僅有關系，而且還關系匪淺還記得Google Brain嗎它在201...

    happyhuangjinjin 評論0 收藏0

發表評論

0條評論

crelaber

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<