css: 带背景的标签样式边框

Question

请问我可以把背景设置成下面这样形成的边框吗？

.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>

clip-path的另一个想法：

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>

css: 带背景的标签样式边框

css: tab style border with background

html

css

background

border