CSS3製做圖形大全——碉堡了

時間  2019-12-09
標籤 css3 css 製做 圖形 大全 碉堡 欄目 CSS 简体版
原文   原文鏈接

爲方便觀看效果圖，請移步原文：https://www.jqhtml.com/8045.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 ;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程