How do I make a div like this be able to expand to any size while having the corner triangles stay the same size? - html

Question

As I said in the title, I want this div to be able to be any size, but without the corner triangles or the line on top getting bigger:
How could I achieve something like this with CSS?

Answer 1

You may use gradients and padding.
possible example
body {
background:linear-gradient(to bottom left , #f8f3e0, silver, #f8f3e0, silver, #f8f3e0, silver, #f8f3e0, silver, #f8f3e0, silver ) ;
}
div {
margin: 1em;
padding: 1.6em 0.5em 1em;
background:
linear-gradient(140deg, transparent 1em, black 1.07em) 0 0 / 1.7em 1.45em no-repeat,
linear-gradient(220deg, transparent 1em, black 1.07em) 100% 0 / 1.7em 1.45em no-repeat,
linear-gradient( to bottom, transparent 1.3em, black 1.3em 1.45em, #e0e5c1 1.45em);
}
div+div {
width: 50vmin;
float: left;
filter:drop-shadow(0 0 1px crimson);
}
div+div+div {
width: 30vmax;
filter: drop-shadow(1px 0px) drop-shadow(-1px 0px) drop-shadow(0 1px); /* a border ? */
}
<div>
<h1>title</h1>
<p>Whatever comes inside</p>
</div>
<div>
<h1>title</h1>
<p>Whatever comes inside</p>
</div>
<div>
<h1>title</h1>
<p>Whatever comes inside</p>
</div>

Answer 2

an idea using clip-path:
.box {
/* adjust the variable to control the clip-path*/
--b:10px;
--c:8px;
/**/
border-top:10px solid #000;
height:100px;
background:#e0e5c1;
clip-path:polygon(var(--b) 0,var(--b) var(--c),calc(100% - var(--b)) var(--c),calc(100% - var(--b)) 0,100% var(--c),100% 100%,0 100%,0 var(--c));
}
<div class="box"></div>