How to make a border like this?
I have followed this tutorial, but have not found a way to achieve the picture I attached. How can I make it like that?
I’ve tried using image/svg for the curve, but it doesn’t look good on responsive.
body {
background:pink;
}
.box {
height:150px;
margin:10px 0;
position:relative;
overflow:hidden;
z-index:0;
--l:3px; /* Thickness of the curve */
--r:90px; /* The curve radius */
--w:60%; /* The width of the left part (i.e distance of the curve from the left) */
--c:red; /* Color of the curve*/
}
.box:before,
.box:after{
content:"";
position:absolute;
z-index:-1;
height:calc(50% - var(--l)); /* each one will take half the height minus border width*/
border-style:solid;
border-color:var(--c);
}
/* Left part */
.box:before {
bottom:0;
left:0;
width:var(--w);
border-width:0 var(--l) var(--l) 0; /* Right & Bottom*/
border-radius:0 0 var(--r) 0; /* Bottom-right*/
}
/* Right part*/
.box:after {
top:0;
right:calc(-1 * var(--l)); /* Move slightly to the right to have a perfect join */
width:calc(100% - var(--w));
border-width:var(--l) 0 0 var(--l); /* Top & Left */
border-radius:var(--r) 0 0 0; /* Top-Left*/
}<div class="box"></div>