Question

我有一个透明区域的小png，我想作为纯色div的右下角，但我似乎无法想出用css做这个优雅的方法。

我目前的css：

div.example {
  border-radius: 9px;
  background-color: #fff;
  background-image: url(bottom-right-corner-peel.png);
  background-repeat: no-repeat;
  background-position: right bottom;
}

上面代码的问题是div（#fff）的背景颜色通过png的透明部分显示，破坏了效果。我可以想到一些非常hacky方法来解决这个问题（例如 - 创建另一个div（或使用::after）将一个元素放在div下面，并使用一些技巧来实现这个功能，但必须有更好的方法吧？

查看[修订]演示：

http://jsbin.com/abacey/8/

Answer 1

以下是您问题的解决方案：http://jsfiddle.net/promatik/uZFpZ/

我在#content-bottom旁边添加了#content：

<div id="content">
    <h1>Corner Peel Demo</h1>
</div>
<div id="content-bottom">
    <div id="content-space"></div>
    <div id="content-corner"></div>
</div>

并在CSS中添加：

div#content{
    ...
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
div#content-bottom {
    height: 30px;
    position: relative;
}
div#content-space {
    height: 27px;
    border-bottom-left-radius: 9px;
    background-color: #fff;
    margin-right: 42px;
}

div#content-corner {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 27px;
    width: 42px;
    background-color: transparent;
    background-image: url(data:image/png;base64,...');
}

Answer 2

我的想法是使用png来掩盖div的整个角落。让我们假设你的png是40x40px，左上角是白色而下半部分是透明的。你可以使用

border-bottom-right-radius: 40px;

“切断”div的角落。因此，您可以看到背景图像。现在你把它放在它上面以掩盖丑陋的圆角。

http://jsfiddle.net/Xd8CD/ （需要更好的png ...）

获取页面卷曲透明图像以使用纯色背景

2 个答案: