完全透明边框

目标：做一个边框（左，右）完全透明的，所以身体的背景颜色可以识破。

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

我已经尝试了许多变通办法都无济于事我的具体问题。

你的包里还有什么窍门？

来源

2013-02-13 andrewk

你确定你不只是想要利润？ – zzzzBov 2013-02-13 22:41:52

他想要有像梯形一样的底部边框，顺便说一句。它适用于我的Chrome – pwolaq 2013-02-13 22:44:27

哈..在提交之前找到了答案。

确保将您想要透明的元素的背景设置为：background:none;或根本没有。

编辑：感谢大卫·托马斯

如果你不这样做，边框是（完全）透明。但是边界实际上是“拉开”元素的背景颜色的;以便背景颜色透过透明边框可见。

来源

2013-02-13 22:40:59 andrewk

否：'border'将（完全）透明。但是'边界'实际上是'画出'元素的'背景颜色'的;所以'背景颜色'通过透明的'边框'是可见的。 – 2013-02-13 22:42:33

有意义，但'划过'是模糊的。我编辑它。 TX – andrewk 2013-02-13 22:52:19

这是因为边框的背景是你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/
我使用部分透明度的边界，所以你可以看到它的行为方式，但你可以将其更改为任何你喜欢的。

来源

2014-05-30 13:25:22 oneday

完全透明边框

回答

相关问题