CSS3 draws basic images, such as circles, ovles, and triangles, and css3 ovles.

CSS3 draws basic images, such as circles, ovles, and triangles, and css3 ovles.
CSS3 circle
# Css3-circle {
Width: 150px;
Height: 150px;
Border-radius: 50%;
Background-color: #232323 ;}
CSS3 oval shape
# Css3-elipse {
Width: 200px;
Height: 100px;
Border-radius: 50%;
Background-color: #232323 ;}
CSS3 triangle
# Css3-triangle {
Width: 0;
Height: 0;
Border-left: 100px solid transparent;
Border-right: 100px solid transparent;
Border-bottom: 150px solid #232323 ;}
CSS3 Parallelogram
# Css3-parallelogram {
Width: 200px;
Height: 100px;
Background: #232323;
-Webkit-transform: skew (-45deg);-moz-transform: skew (-45deg);-o-transform: skew (-45deg );
Transform: skew (-45deg );
}
CSS3 Trapezoid
# Css3-trapezoid {
Width: 100px;
Height: 0;
Border-bottom: 100px solid #232323;
Border-left: 50px solid transparent;
Border-right: 50px solid transparent;
}
CSS3 hexagonal star
# Css3-six-star {
Width: 0;
Height: 0;
Position: relative;
Border-bottom: 100px solid #232323;
Border-left: 50px solid transparent;
Border-right: 50px solid transparent;
# Css3-six-star: after {
Content :"";
Width: 0;
Height: 0;
Position: absolute;
Left:-50px;
Top: 35px;
Border-top: 100px solid #232323;
Border-left: 50px solid transparent;
Border-right: 50px solid transparent;
}
CSS3 star
# Css3-five-star {
Width: 0px;
Height: 0px;
Margin: 50px 0;
Position: relative;
Display: block;
Color: #232323;
Border-right: 100px solid transparent;
Border-bottom: 70px solid #232323;
Border-left: 100px solid transparent;-moz-transform: rotate (35deg);-webkit-transform: rotate (35deg);-ms-transform: rotate (35deg ); -o-transform: rotate (35deg );
} # Css3-five-star: before {
Border-bottom: 80px solid #232323 ;;
Border-left: 30px solid transparent;
Border-right: 30px solid transparent;
Position: absolute;
Height: 0;
Width: 0;
Top:-45px;
Left:-63px;
Display: block;
Content: '';-webkit-transform: rotate (-35deg);-moz-transform: rotate (-35deg);-ms-transform: rotate (-35deg ); -o-transform: rotate (-35deg );
# Css3-five-star: after {
Position: absolute;
Display: block;
Color: #232323;
Top: 3px;
Left:-105px;
Width: 0px;
Height: 0px;
Border-right: 100px solid transparent;
Border-bottom: 70px solid #232323;
Border-left: 100px solid transparent;-webkit-transform: rotate (-70deg);-moz-transform: rotate (-70deg);-ms-transform: rotate (-70deg);-o-transform: rotate (-70deg );
Content :'';
}
CSS3 Pentagon
# Css3-pentagon {
Position: relative;
Width: 54px;
Border-width: 50px 18px 0;
Border-style: solid;
Border-color: #232323 transparent;} # css3-pentagon: before {
Content :"";
Position: absolute;
Height: 0;
Width: 0;
Top:-85px;
Left:-18px;
Border-width: 0 45px 35px;
Border-style: solid;
Border-color: transparent #232323 ;}
CSS3 hexagonal
# Css3-hexagon {
Width: 100px;
Height: 55px;
Background: #232323;
Position: relative;
} # Css3-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 #232323;} # css3-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 #232323 ;}
CSS3 heart shape
# Css3-heart {
Position: relative;
Width: 100px;
Height: 90px;
} # Css3-heart: before, # css3-heart: after {
Position: absolute;
Content :"";
Left: 50px;
Top: 0;
Width: 50px;
Height: 80px;
Background: #232323;
-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%;
# Css3-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%;
}
CSS3 gossip
# Css3-gossip {
Width: 96px;
Height: 48px;
Background: # f1f1f1;
Border-color: #232323;
Border-style: solid;
Border-width: 2px 2px 50px 2px;
Border-radius: 100%;
Position: relative;
} # Css3-gossip: before {
Content :"";
Position: absolute;
Top: 50%;
Left: 0;
Background: # f1f1f1;
Border: 18px solid #232323;
Border-radius: 100%;
Width: 12px;
Height: 12px;
# Css3-gossip: after {
Content :"";
Position: absolute;
Top: 50%;
Left: 50%;
Background: #232323;
Border: 18px solid # f1f1f1;
Border-radius: 100%;
Width: 12px;
Height: 12px;
}