css: tab style border with background - html

Question

Tell me, can I set the background to the border formed in the following way?
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>
It's probably worth using the custom border-image, but it seemed to me that this still does not have enough functionality.
I want instead of a white color on the tab to display the image background (for example, https://cdn.pixabay.com/photo/2016/12/02/17/39/texture-1878273__340.jpg)

Answer 1

You can use multiple background and gradient:
.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>
Another idea with 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>
UPDATE
Another way more supported that rely on more elements:
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>