CSS：带有背景的标签样式边框

Question

告诉我，我可以将背景设置为以以下方式形成的边框吗？

https://jsfiddle.net/2Lous8vq/1/

.object {
    position: relative;
    width: 300px;
    height: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    background: transparent;
}

.object:after {
    content: '';
    position: absolute;
    top: 2px;
    left: calc(2.45px - 50px);
    width: calc(300px - 2 * 1.4px);
    height: 0px;
    border-left: 49px solid transparent;
    border-right: 49px solid transparent;
    border-bottom: calc(100px - 2px) solid white;
    background: transparent;
}

<div class="object"></div>

使用自定义的border-image可能值得，但是在我看来，这仍然没有足够的功能。

我希望在标签上使用白色而不是白色来显示图像背景（例如， https://cdn.pixabay.com/photo/2016/12/02/17/39/texture-1878273__340.jpg ）

Answer 1

您可以使用多个背景和渐变：

 .object { width: 300px; height: 100px; background: linear-gradient(to bottom left,#fff 49%,red 49%,red 51%,transparent 0) 100% 0/40px 100% no-repeat, linear-gradient(to bottom right,#fff 49%,red 49%,red 51%,transparent 0) 0 0/40px 100% no-repeat, linear-gradient(red,red) 0 0/100% 2px no-repeat, url(https://cdn.pixabay.com/photo/2016/12/02/17/39/texture-1878273__340.jpg)0 0/cover no-repeat; } 

 <div class='object'></div> 

剪切路径的另一个想法：

 body { background:yellow; } .object { width: 300px; height: 100px; border-bottom:none; background: linear-gradient(red,red) 0 0/100% 2px no-repeat, linear-gradient(to bottom left,red 51%,transparent 51.5%) 100% 0/60px 100% no-repeat, linear-gradient(to bottom right,red 51%,transparent 51.5%) 0 0/60px 100% no-repeat, url(https://cdn.pixabay.com/photo/2016/12/02/17/39/texture-1878273__340.jpg)0 0/cover no-repeat; -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); } 

 <div class='object'></div> 

更新

依靠更多元素得到更多支持的另一种方式：

 body { background:yellow; } * { box-sizing:border-box; } .object { width: 300px; height: 100px; border-bottom:none; font-size:0; } .object .left, .object .right { width:50%; display:inline-block; height:100%; border-top:2px solid red; position:relative; overflow:hidden; } .object .left { border-left:2px solid red; transform:skew(-20deg); transform-origin:bottom left; } .object .right { border-right:2px solid red; transform:skew(20deg); transform-origin:bottom right; } .object .left:before { content:""; position:absolute; top:0; left:-20px; bottom:0; right:-20px; transform:skew(20deg); background:url(https://cdn.pixabay.com/photo/2016/12/02/17/39/texture-1878273__340.jpg); } .object .right:before { content:""; position:absolute; top:0; left:-20px; bottom:0; right:-20px; transform:skew(-20deg); background:url(https://cdn.pixabay.com/photo/2016/12/02/17/39/texture-1878273__340.jpg); } 

 <div class='object'> <div class="left"></div> <div class="right"></div> </div>