Question

简单问题

目标：使边框（左侧和右侧）完全透明，以便可以看到正文背景颜色。

<html>
<body>
<div id="wrap">
<div class="trap">
    Make the white borders transparent, so when I change the background color the background color will be seen through the borders.
    I've tried rgb() with opacity but no luck
</div>
<div class="trap2">
   This is what I'd like but I'm setting the border = bg color;
</div>

</div>
</body>
</html>

CSS

body {background:#eee;}
#wrap {padding:50px;}
.trap {
width:350px;
background: rgb(238, 238, 238);
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid rgb(216, 199, 143);
}
.trap2 {
width:350px;
margin-top:100px;
background: rgb(238, 238, 238);
border-right: 30px solid #fff;
border-left: 30px solid #fff;
border-bottom: 30px solid rgb(216, 199, 143);
}

我尝试过很多解决方法，无法解决我的具体问题。

你的包里还有任何技巧吗？

Answer 1

哈......在点击提交前几秒钟找到答案。

确保将要透明的元素的背景设置为：background:none;或根本不设置任何内容。

编辑：感谢David Thomas

如果不这样做，边框将（完全）透明。但是，边界有效地“覆盖”了元素的背景颜色;这样透明边框可以看到背景颜色。

Answer 2

这是因为边框的背景是你的div的背景，而不是身体。阅读本文以供参考：http://css-tricks.com/transparent-borders-with-background-clip/

此代码：

#yourElement {
-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

使边框保持在div之外，因此使用透明度设置可以看到正文背景的颜色，而不是div背景颜色。

这是你更新的小提琴：http://jsfiddle.net/C9gJQ/
我对边框使用了部分透明度，因此您可以看到它的行为方式，但您可以将其更改为您喜欢的任何内容。

完全透明的边界

2 个答案: