ВОПРОИЗВЕДЕНИЕ формы изображения с помощью CSS

Question

Я пытаюсь воспроизвести это изображение, используя только CSS

Я играл со свойством радиуса, но, как вы видите, я не получаю один и тот же угол эффекта ,

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

Вы можете увидеть, что я пытался на http://jsfiddle.net/ymorin007/7qX4U/

Спасибо.

Answer 1

Может быть не кросс-браузерный, но получите вы закроете :)

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

скрипку: http://jsfiddle.net/pggRb/

Answer 2

Если вам нужно ударить тест, вы можете рассмотреть возможность использования перекос псевдо-элемент:

div { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 50px; 
 
    width: 200px; 
 
    background: gray; 
 
    cursor: pointer; 
 
    transition: all 0.6s; 
 
} 
 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: -50%; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: inherit; 
 
    transform: skewX(-45deg); 
 
    border-radius: 20px 0 0 0; 
 
    z-index: -1; 
 
} 
 
div:hover { 
 
    background: tomato; 
 
    ]

<div>SOME TEXT</div>