CSS3 Transform example

by Avdhut Sonpethkar

HTML

<div class="test_transform">
    &nbsp;
</div>

CSS

.test_transform
{
    height: 200px;
    width: 200px;
    background: #FFadc0;
    opacity: 0.9;
   position: relative;
    margin: 100px;
    
}

.test_transform:after {
	content:"";
	position:absolute;
	z-index:-2;
	bottom:-30px;
	left:90%;
	height:80px;
	border-right:200px solid #ffed26;
	background:#ffed26; /* need this for webkit - bug in handling of border-radius */
	/* css3 */
	-webkit-border-bottom-right-radius:200px 100px;
	-moz-border-radius-bottomright:200px 100px;
	border-bottom-right-radius:200px 100px;
	/* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
	-webkit-transform:translate(0, -2px);
	-moz-transform:translate(0, -2px);
	-ms-transform:translate(0, -2px);
	-o-transform:translate(0, -2px);
	transform:translate(0, -2px);
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

.test_transform:before {
	content:"";
	position:absolute;
	z-index:-2;
	bottom:-30px;
	left:0%;
	height:80px;
	border-right:200px solid #ff1100;
	background:transparent; /* need this for webkit - bug in handling of border-radius */
	/* css3 */
	-webkit-border-bottom-left-radius:200px 100px;
	-moz-border-radius-bottomleft:200px 100px;
	border-bottom-left-radius:200px 100px;
	/* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
	-webkit-transform:translate(0, -2px);
	-moz-transform:translate(0, -2px);
	-ms-transform:translate(0, -2px);
	-o-transform:translate(0, -2px);
	transform:translate(0, -2px);
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}