css - 完全透明的边框

简单问题

目标:使边框(左和右)完全透明，以便可以看到主体背景颜色。

<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);
}

我已经尝试了很多解决方法，但对我的具体问题无济于事。

你的包里还有什么花样吗？

最佳答案

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

确保将要透明的元素的背景设置为:background:none; 或什么都不设置。

编辑:感谢 David Thomas

如果不这样做，边框将(完全)透明。但是边框实际上是“绘制在”元素的背景颜色上的；这样背景颜色就可以“通过”透明边框看到。

关于css - 完全透明的边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14864637/