正文

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

IP云
IP云V管理员/3 阅读
11/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

为方便观看效果图，请移步原文：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 ;
}

相关阅读

目录[+]