我知道一些border tricks ,我可以创建梯形。我还可以将其边框颜色设置为 rgba(r,g,b,a) 以使其透明。
但是是否可以创建具有透明边框和背景的梯形?
示例见下图,
目前,我使用一些png图像来实现这种效果,但是生成不同大小的图像真的很无聊,所以我正在寻找一个css解决方案。
最佳答案
个人觉得有点矫枉过正,不过也可以这样做:
demo
HTML:
<div class='outer'>
<div class='content'><!--stuff here--></div>
<div class='label l1'></div>
<div class='label l2'></div>
</div>
CSS:
.outer {
position: relative;
width: 500px; /* whole thing breaks if this is not a multiple of 100px */
border: solid .5em rgba(0,0,255,.5);
border-bottom: solid 0px transparent;
margin: 7em auto 0;
background: rgba(0,0,0,.5);
background-clip: padding-box;
}
.outer:before, .outer:after {
position: absolute;
top: 100%;
height: .5em;
background: rgba(0,0,255,.5);
content: ''
}
.outer:before { left: -.5em; width: 15%; border-left: solid .5em transparent; }
.outer:after { right: -.5em; width: 55%; border-right: solid .5em transparent; }
.content {
padding: .5em;
margin: 1.5em;
border-bottom: solid 1.5em transparent;
background: lightblue;
background-clip: padding-box;
}
.label {
overflow: hidden;
position: absolute;
top: 100%;
width: 15%;
height: 3em;
}
.l1 { left: 15%; }
.l2 { left: 30%; }
.label:before {
position: absolute;
top: -.5em;
width: 100%;
height: 2.5em;
border: solid .5em rgba(0,0,255,.5);
background: rgba(0,0,0,.5);
background-clip: padding-box;
content: '';
}
.l1:before { left: 9%; transform: skewX(30deg); }
.l2:before { right: 9%; transform: skewX(-30deg); }
它在 Firefox、Chrome、Opera 和 Safari 中工作(我不敢在 IE9 中测试它,虽然 transform
和 background-clip
都工作)但前提是.outer
的 width
的值是 100px
的倍数。
除非使用 100px
的倍数的 width
,否则它只能在 Firefox 和 Chrome 中工作(Chrome 中有一个小故障 - 可以通过使用 WebKit 来修复- 只有从左到右的线性渐变,从透明到真正接近开始的半透明蓝色急剧变化。
它在 Opera 和 Safari 中中断(如果使用的 width
不是 100px
的倍数):
关于javascript - 创建一个具有透明边框和背景的梯形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12491438/