CSS3制作图形大全——碉堡了

关注 mob604756f920a7

文章目录

CSS3制作图形大全——碉堡了

转载

mob604756f920a7 2019-04-09 16:27:00

文章标签 css 5e ico facebook html 文章分类 代码人生

Square

`#``square``{``width``:` `100px``;``height``:` `100px``;``background``:` `red``;``}`

Rectangle

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

Circle

`#``circle``{``width``:` `100px``;``height``:` `100px``;``background``:` `red``;``-moz-border-radius:` `50px``;``-webkit-border-radius:` `50px``;``border-radius:` `50px``;``}``/* Cleaner, but slightly less support: use "50%" as value */`

oval

`#oval {``width``:` `200px``;``height``:` `100px``;``background``:` `red``;``-moz-border-radius:` `100px``/` `50px``;``-webkit-border-radius:` `100px``/` `50px``;``border-radius:` `100px``/` `50px``;``}``/* Cleaner, but slightly less support: use "50%" as value */`

Triangle Up

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

Triangle Down

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

Triangle Left

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

Triangle Right

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

Triangle Top Left

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

Triangle Top Right

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

Triangle Bottom Left

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

Triangle Bottom Right

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

Curved Tail Arrow

`#curvedarrow {``position``:` `relative``;``width``:` `0``;``height``:` `0``;``border-top``:` `9px``solid``transparent``;``border-right``:` `9px``solid``red``;``-webkit-transform: rotate(``10``deg);``-moz-transform: rotate(``10``deg);``-ms-transform: rotate(``10``deg);``-o-transform: rotate(``10``deg);``}``#curvedarrow:after {``content``:` `""``;``position``:` `absolute``;``border``:` `0``solid``transparent``;``border-top``:` `3px``solid``red``;``border-radius:` `20px``0``0``0``;``top``:` `-12px``;``left``:` `-9px``;``width``:` `12px``;``height``:` `12px``;``-webkit-transform: rotate(``45``deg);``-moz-transform: rotate(``45``deg);``-ms-transform: rotate(``45``deg);``-o-transform: rotate(``45``deg);``}`

Trapezoid

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

Parallelogram

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

Star (6-points)

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

Star (5-points)

`#star-five {``margin``:` `50px``0``;``position``:` `relative``;``display``:` `block``;``color``:` `red``;``width``:` `0px``;``height``:` `0px``;``border-right``:` `100px``solid``transparent``;``border-bottom``:` `70px``solid``red``;``border-left``:` `100px``solid``transparent``;``-moz-transform: rotate(``35``deg);``-webkit-transform: rotate(``35``deg);``-ms-transform: rotate(``35``deg);``-o-transform: rotate(``35``deg);``}``#star-five:before {``border-bottom``:` `80px``solid``red``;``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(``-35``deg);``-moz-transform: rotate(``-35``deg);``-ms-transform: rotate(``-35``deg);``-o-transform: rotate(``-35``deg);``}``#star-five:after {``position``:` `absolute``;``display``:` `block``;``color``:` `red``;``top``:` `3px``;``left``:` `-105px``;``width``:` `0px``;``height``:` `0px``;``border-right``:` `100px``solid``transparent``;``border-bottom``:` `70px``solid``red``;``border-left``:` `100px``solid``transparent``;``-webkit-transform: rotate(``-70``deg);``-moz-transform: rotate(``-70``deg);``-ms-transform: rotate(``-70``deg);``-o-transform: rotate(``-70``deg);``content``:` `''``;``}`

Pentagon

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

Hexagon

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

Octagon

`#octagon {``width``:` `100px``;``height``:` `100px``;``background``:` `red``;``position``:` `relative``;``}``#octagon:before {``content``:` `""``;``position``:` `absolute``;``top``:` `0``;``left``:` `0``;``border-bottom``:` `29px``solid``red``;``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``red``;``border-left``:` `29px``solid``#eee``;``border-right``:` `29px``solid``#eee``;``width``:` `42px``;``height``:` `0``;``}`

Heart

`#heart {``position``:` `relative``;``width``:` `100px``;``height``:` `90px``;``}``#heart:before,``#heart:after {``position``:` `absolute``;``content``:` `""``;``left``:` `50px``;``top``:` `0``;``width``:` `50px``;``height``:` `80px``;``background``:` `red``;``-moz-border-radius:` `50px``50px``0``0``;``border-radius:` `50px``50px``0``0``;``-webkit-transform: rotate(``-45``deg);``-moz-transform: rotate(``-45``deg);``-ms-transform: rotate(``-45``deg);``-o-transform: rotate(``-45``deg);``transform: rotate(``-45``deg);``-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(``45``deg);``-moz-transform: rotate(``45``deg);``-ms-transform: rotate(``45``deg);``-o-transform: rotate(``45``deg);``transform: rotate(``45``deg);``-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

`#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``red``;``-moz-border-radius:` `50px``50px``0``50px``;``border-radius:` `50px``50px``0``50px``;``-webkit-transform: rotate(``-45``deg);``-moz-transform: rotate(``-45``deg);``-ms-transform: rotate(``-45``deg);``-o-transform: rotate(``-45``deg);``transform: rotate(``-45``deg);``}``#infinity:after {``left``:` `auto``;``right``:` `0``;``-moz-border-radius:` `50px``50px``50px``0``;``border-radius:` `50px``50px``50px``0``;``-webkit-transform: rotate(``45``deg);``-moz-transform: rotate(``45``deg);``-ms-transform: rotate(``45``deg);``-o-transform: rotate(``45``deg);``transform: rotate(``45``deg);``}`

Diamond Square

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

Diamond Shield

`#diamond-shield {``width``:` `0``;``height``:` `0``;``border``:` `50px``solid``transparent``;``border-bottom``:` `20px``solid``red``;``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``red``;``}`

Diamond Narrow

`#diamond-narrow {``width``:` `0``;``height``:` `0``;``border``:` `50px``solid``transparent``;``border-bottom``:` `70px``solid``red``;``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``red``;``}`

Cut Diamond

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

Egg

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

Pac-Man

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

Talk Bubble

`#talkbubble {``width``:` `120px``;``height``:` `80px``;``background``:` `red``;``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``red``;``border-bottom``:` `13px``solid``transparent``;``}`

12 Point Burst

`#burst``-12``{``background``:` `red``;``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``:` `red``;``}``#burst``-12:``before {``-webkit-transform: rotate(``30``deg);``-moz-transform: rotate(``30``deg);``-ms-transform: rotate(``30``deg);``-o-transform: rotate(``30``deg);``}``#burst``-12:``after {``-webkit-transform: rotate(``60``deg);``-moz-transform: rotate(``60``deg);``-ms-transform: rotate(``60``deg);``-o-transform: rotate(``60``deg);``}`

8 Point Burst

`#burst``-8``{``background``:` `red``;``width``:` `80px``;``height``:` `80px``;``position``:` `relative``;``text-align``:` `center``;``-webkit-transform: rotate(``20``deg);``-moz-transform: rotate(``20``deg);``-ms-transform: rotate(``20``deg);``-o-transform: rotate(``20``eg);``}``#burst``-8:``before {``content``:` `""``;``position``:` `absolute``;``top``:` `0``;``left``:` `0``;``height``:` `80px``;``width``:` `80px``;``background``:` `red``;``-webkit-transform: rotate(``135``deg);``-moz-transform: rotate(``135``deg);``-ms-transform: rotate(``135``deg);``-o-transform: rotate(``135``deg);``}`

Yin Yang

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

Badge Ribbon

`#bad``ge-ribbon {``position``:` `relative``;``background``:` `red``;``height``:` `100px``;``width``:` `100px``;``-moz-border-radius:` `50px``;``-webkit-border-radius:` `50px``;``border-radius:` `50px``;``}``#bad``ge-ribbon:before,``#bad``ge-ribbon:after {``content``:` `''``;``position``:` `absolute``;``border-bottom``:` `70px``solid``red``;``border-left``:` `40px``solid``transparent``;``border-right``:` `40px``solid``transparent``;``top``:` `70px``;``left``:` `-10px``;``-webkit-transform: rotate(``-140``deg);``-moz-transform: rotate(``-140``deg);``-ms-transform: rotate(``-140``deg);``-o-transform: rotate(``-140``deg);``}``#bad``ge-ribbon:after {``left``:` `auto``;``right``:` `-10px``;``-webkit-transform: rotate(``140``deg);``-moz-transform: rotate(``140``deg);``-ms-transform: rotate(``140``deg);``-o-transform: rotate(``140``deg);``}`

Space Invader

`#space-invader{``box-shadow:``0``0``0``1em``red``,``0``1em``0``1em``red``,``-2.5em``1.5em``0``.``5em``red``,``2.5em``1.5em``0``.``5em``red``,``-3em``-3em``0``0``red``,``3em``-3em``0``0``red``,``-2em``-2em``0``0``red``,``2em``-2em``0``0``red``,``-3em``-1em``0``0``red``,``-2em``-1em``0``0``red``,``2em``-1em``0``0``red``,``3em``-1em``0``0``red``,``-4em``0``0``0``red``,``-3em``0``0``0``red``,``3em``0``0``0``red``,``4em``0``0``0``red``,``-5em``1em``0``0``red``,``-4em``1em``0``0``red``,``4em``1em``0``0``red``,``5em``1em``0``0``red``,``-5em``2em``0``0``red``,``5em``2em``0``0``red``,``-5em``3em``0``0``red``,``-3em``3em``0``0``red``,``3em``3em``0``0``red``,``5em``3em``0``0``red``,``-2em``4em``0``0``red``,``-1em``4em``0``0``red``,``1em``4em``0``0``red``,``2em``4em``0``0``red``;``background``:` `red``;``width``:` `1em``;``height``:` `1em``;``overflow``:` `hidden``;``margin``:` `50px``0``70px``65px``;``}`

TV Screen

`#``tv``{``position``:` `relative``;``width``:` `200px``;``height``:` `150px``;``margin``:` `20px``0``;``background``:` `red``;``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``: inherit;``border-radius:` `5%``/` `50%``;``}`

Chevron

`#chevron {``position``:` `relative``;``text-align``:` `center``;``padding``:` `12px``;``margin-bottom``:` `6px``;``height``:` `60px``;``width``:` `200px``;``}``#chevron:before {``content``:` `''``;``position``:` `absolute``;``top``:` `0``;``left``:` `0``;``height``:` `100%``;``width``:` `51%``;``background``:` `red``;``-webkit-transform: skew(``0``deg,` `6``deg);``-moz-transform: skew(``0``deg,` `6``deg);``-ms-transform: skew(``0``deg,` `6``deg);``-o-transform: skew(``0``deg,` `6``deg);``transform: skew(``0``deg,` `6``deg);``}``#chevron:after {``content``:` `''``;``position``:` `absolute``;``top``:` `0``;``right``:` `0``;``height``:` `100%``;``width``:` `50%``;``background``:` `red``;``-webkit-transform: skew(``0``deg,` `-6``deg);``-moz-transform: skew(``0``deg,` `-6``deg);``-ms-transform: skew(``0``deg,` `-6``deg);``-o-transform: skew(``0``deg,` `-6``deg);``transform: skew(``0``deg,` `-6``deg);``}`

Facebook Icon

`#faceb``ook-``icon``{``background``:` `red``;``text-indent``:` `-999em``;``width``:` `100px``;``height``:` `110px``;``border-radius:` `5px``;``position``:` `relative``;``overflow``:` `hidden``;``border``:` `15px``solid``red``;``border-bottom``:` `0``;``}``#faceb``ook-icon::before {``content``:` `"/20"``;``position``:` `absolute``;``background``:` `red``;``width``:` `40px``;``height``:` `90px``;``bottom``:` `-30px``;``right``:` `-37px``;``border``:` `20px``solid``#eee``;``border-radius:` `25px``;``}``#faceb``ook-icon::after {``content``:` `"/20"``;``position``:` `absolute``;``width``:` `55px``;``top``:` `50px``;``height``:` `20px``;``background``:` `#eee``;``right``:` `5px``;``}`

Moon

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

flag

`#flag {``width``:` `110px``;``height``:` `56px``;``padding-top``:` `15px``;``position``:` `relative``;``background``:` `red``;``color``:` `white``;``font-size``:` `11px``;``letter-spacing``:` `0.2em``;``text-align``:` `center``;``text-transform``:` `uppercase``;``}``#flag:after {``content``:` `""``;``position``:` `absolute``;``left``:` `0``;``bottom``:` `0``;``width``:` `0``;``height``:` `0``;``border-bottom``:` `13px``solid``#eee``;``border-left``:` `55px``solid``transparent``;``border-right``:` `55px``solid``transparent``;``}`

Cone

`#cone {``width``:` `0``;``height``:` `0``;``border-left``:` `70px``solid``transparent``;``border-right``:` `70px``solid``transparent``;``border-top``:` `100px``solid``red``;``-moz-border-radius:` `50%``;``-webkit-border-radius:` `50%``;``border-radius:` `50%``;``}`

Cross

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

Base

`#base {``background``:` `red``;``display``: inline-``block``;``height``:` `55px``;``margin-left``:` `20px``;``margin-top``:` `55px``;``position``:` `relative``;``width``:` `100px``;``}``#base:before {``border-bottom``:` `35px``solid``red``;``border-left``:` `50px``solid``transparent``;``border-right``:` `50px``solid``transparent``;``content``:` `""``;``height``:` `0``;``left``:` `0``;``position``:` `absolute``;``top``:` `-35px``;``width``:` `0``;``}`

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

赞
收藏
评论
分享
举报

上一篇：Linux服务器jstat命令查看jvm的GC情况

下一篇：透过数据,横看成岭侧成峰

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

mob604756f920a7

关注

职场话题

2024软考

华为认证

K8s

数据库

近期文章

文章目录

举报文章

请选择举报类型

内容侵权涉嫌营销内容抄袭违法信息其他

具体原因

包含不真实信息涉及个人隐私

原文链接（必填）

补充说明

0/200

上传截图

格式支持JPEG/PNG/JPG，图片不超过1.9M

已经收到您得举报信息，我们会尽快审核

鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

短视频免费课程课程排行直播课软考学堂

全部课程厂商认证 IT技术 24年11月软考 PMP项目管理免费题库

在线学习

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

51CTO博客

首页
关注
排行榜
精品课程
免费直播
软考题库

科目全、试题精、讲解专业，扫码免费刷

搜索历史清空

热门搜索

查看【】的结果
写文章
创作中心
登录注册