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;
}

view demo