3

我有一个带有透明区域的小 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的透明部分显示出来，破坏了效果。我可以想到一些非常老套的方法来解决这个问题（例如 - 创建另一个 div （或使用::after）将一个元素放在有问题的 div 下面，并使用一些技巧来完成这项工作，但必须有更好的方法，对?

查看 [修订] 演示：

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

4

2 回答 2

1

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

border-bottom-right-radius: 40px;

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

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

于 2013-02-19T17:26:37.917 回答
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,...');
}
于 2013-02-19T16:59:58.937 回答