CSS3 Shapes

CSS3 Shapes - no images

Circle

.circle {
width:100px;
height:100px;
background: #333;
-moz-border-radius:50px; /* Firefox */
-webkit-border-radius:50px; /* Chrom, Safari */
border-radius:50px; /* Opera */
margin:0 0 50px 0;
}

Half circle

.circle_half {
width:100px;
height:50px;
background: #333;
-moz-border-radius:0 0 50px 50px; /* Firefox */
-webkit-border-radius:0 0 50px 50px; /* Chrom, Safari */
border-radius:0 0 50px 50px; /* Opera */
margin:0 0 50px 0;
}

Drop

.drop {
width:100px;
height:100px;
background: #333;
-webkit-border-radius: 10px 50px 50px 50px; /* Firefox */
-moz-border-radius: 10px 50px 50px 50px; /* Chrom, Safari */
border-radius: 10px 50px 50px 50px; /* Opera */
-webkit-transform: rotate(45deg); /* Firefox */
-moz-transform: rotate(45deg); /* Chrom, Safari */
-o-transform: rotate(45deg); /* Opera */
margin:0 0 50px 0;
}

Triangle

.triangle {
width:1px;
height:1px;
border-color: #333 transparent #eee transparent;
border-style:solid;
border-width:50px;
margin:0 0 50px 0;
}

Annulus

.circle {
width:100px;
height:100px;
background: #333;
-moz-border-radius:50px; /* Firefox */
-webkit-border-radius:50px; /* Chrom, Safari */
border-radius:50px; /* Opera */
margin:0 0 50px 0;
}

.circle2 {
background-color:#fff;
width:50px;
height:50px;
-moz-border-radius:50px; /* Firefox */
-webkit-border-radius:50px; /* Chrom, Safari */
border-radius:50px; /* Opera */
top:-125px;
left:25px;
position:relative;
}