我正在尝试仅使用 css 重现此图像
我玩过 radius 属性,但正如您将看到的,我没有得到相同的 Angular 效果。
.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/ 看到我尝试过的内容
谢谢。
最佳答案
可能不是跨浏览器兼容的,但这会让你接近:)
.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/
关于css - 使用 CSS 重现图像形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13648131/