Creating a resizable div container with beveled corners [duplicate] - html

Question

I have a bit of a problem with creating a block with beveled edges, in addition I need a border to be beveled and slightly off the main block. The problem is that this block can be Reponsive according to the screen.
I do not know the exact way to do it, hope everyone helps.
This is what I do now
.box {
display: flex;
padding: 20px;
height: 200px;
width: 300px;
color: #ffffff;
background: red;
position: relative;
}
.box .edge {
width: 18px;
height: 10px;
background: #ffffff;
position: absolute;
}
.box .edge.top-left {
top: -4px;
left: -8px;
transform: rotate(-45deg);
}
.box .edge.top-right {
top: -4px;
right: -8px;
transform: rotate(45deg);
}
.box .edge.bottom-left {
bottom: -4px;
left: -8px;
transform: rotate(45deg);
}
.box .edge.bottom-right {
bottom: -4px;
right: -8px;
transform: rotate(-45deg);
}
<div class="box">
<div class="edge top-left"></div>
<div class="edge top-right"></div>
<div class="edge bottom-left"></div>
<div class="edge bottom-right"></div>
<div class="content">
content
</div>
</div>

Answer 1

Here is an idea based on this previous answer. Simply adjust the different variables to get the result you want:
.box {
--c:10px; /* the corner */
--b:3px; /* border thickness*/
--o:-10px,-15px; /* offset*/
--border-color:green;
--bg-color:red;
width: 200px;
height: 100px;
display:inline-block;
margin:30px;
position:relative;
z-index:0;
}
.box:before,
.box:after{
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
clip-path: polygon(var(--c) 0%, calc(100% - var(--c)) 0%, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0% calc(100% - var(--c)), 0% var(--c));
background:var(--bg-color);
}
.box:after {
--grad:transparent 49.5%,var(--border-color) 50%;
background:
linear-gradient(to top right ,var(--grad)) top right,
linear-gradient(to top left ,var(--grad)) top left,
linear-gradient(to bottom right,var(--grad)) bottom right,
linear-gradient(to bottom left ,var(--grad)) bottom left;
background-size:calc(var(--c) - var(--b)) calc(var(--c) - var(--b));
background-repeat:no-repeat;
border: var(--b) solid var(--border-color);
transform:translate(var(--o));
}
<div class='box'></div>
<div class='box' style="--c:40px;--b:2px;--o:10px,-20px;--border-color:blue;--bg-color:orange"></div>
Works with image too:
.box {
--c:10px; /* the corner */
--b:3px; /* border thickness*/
--o:-10px,-15px; /* offset*/
--border-color:green;
--bg-color:red;
width: 200px;
height: 100px;
display:inline-block;
margin:30px;
position:relative;
z-index:0;
}
.box:before,
.box:after{
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
clip-path: polygon(var(--c) 0%, calc(100% - var(--c)) 0%, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0% calc(100% - var(--c)), 0% var(--c));
background:url(https://picsum.photos/id/1069/800/800) center/cover;
}
.box:after {
--grad:transparent 49.5%,var(--border-color) 50%;
background:
linear-gradient(to top right ,var(--grad)) top right,
linear-gradient(to top left ,var(--grad)) top left,
linear-gradient(to bottom right,var(--grad)) bottom right,
linear-gradient(to bottom left ,var(--grad)) bottom left;
background-size:calc(var(--c) - var(--b)) calc(var(--c) - var(--b));
background-repeat:no-repeat;
border: var(--b) solid var(--border-color);
transform:translate(var(--o));
}
<div class='box'></div>
<div class='box' style="--c:40px;--b:2px;--o:10px,-20px;--border-color:blue;"></div>

Answer 2

You can use outline property to create border which can give create border off the main block using outline-offset property. And hide the overflow element at the corner side using overflow:hidden property.
For example:
.box{
outline:5px solid black;
outline-offset:5px;
overflow:hidden;
}