使用CSS重现图像形状

我正在尝试仅使用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;
}
​

你可以看到我尝试了什么

---

谢谢。

可能不兼容跨浏览器，但这会让您接近：）

---

小提琴：

如果你需要点击测试，你可能想考虑使用一个歪斜的伪元素：

div{
位置：固定；
底部：0；
右：0；
高度：50px；
宽度：200px；
背景：灰色；
光标：指针；
过渡：均为0.6s；
}
部门：以前{
内容：“；
位置：绝对位置；
排名：0；
左-50%；
宽度：100%；
身高：100%；
背景：继承；
变换：skewX（-45度）；
边界半径：20px 0；
z指数：-1；
}
div:悬停{
背景：番茄；
]

---

一些文本

您需要将其仅作为一个html元素还是我们可以使用更多的元素（尽可能少）？可以是多个元素，但不能是图像，因为动态内容将显示在其中。

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