Reproduce image shape using CSS

css, css-shapes

Solution

Might not be cross-browser compatible, but this'll get you close :)

.shape{
    background-color: black;
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */    
    color:white;
    font-weight:bold;
    padding: 30px 30px 30px 50px;
    text-align:center;
    position:absolute;
    right:0;
    bottom:0;
    z-index:1003;
    font-size: 20px;    
    border-top-left-radius: 125px;
    -moz-border-radius-topright: 125px;
}

.shape::before{
   content:"";
   width:0;
   height:0;
   position:absolute;
   left:-34px;
   border-left: 53px solid transparent;
   border-right: 53px solid transparent;    
   border-bottom: 53px solid black;
}
​

fiddle: http://jsfiddle.net/pggRb/

Problem

I'm trying to reproduce this image using only css I've played with the radius property but as you will see I don't get the same angle effect. ``` .shape{ background-color: black; opacity:0.9; filter:alpha(opacity=90); /* For IE8 and earlier */ color:white; font-weight:bold; padding: 30px 30px 30px 50px; text-align:center; position:absolute; right:0; bottom:0; z-index:1003; font-size: 20px; border-top-left-radius: 125px; -moz-border-radius-topright: 125px; } ​ ``` You can see what I've tried at http://jsfiddle.net/ymorin007/7qX4U/ Thanks.

Original source