the shape that i want to do

the shape that i have by searching in similar questions

i want the shape to have full border (like in the image). Inside this shape its gonna be more content so i need it whit out rotate or something like that, anyone know? This is the code i have so far, i am using sass, i have done a research from multiple websites and see other people similar questions what other people done in stack overflow but nothing result me useful

    <article>
        <div class='card__info--left'>
            <p>${data.origin.name}</p>
            <p>${data.location.name}</p>
            <p>${data.episode.length}</p>
        </div>
        <div class='card__info--img'>
            <img src='${data.image}' alt='${data.name}'>
        </div>
        <div class='card__info--right'>
            <h3>${data.name}</h3>
            <p>${data.status}</p>
            <p>${data.species}</p>
            <p>- ${data.type}</p>
            <p>${data.gender}</p>
        </div>
    </article>

    article {
    margin: auto;
    display: grid;
    place-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    background-color: #c92b2b6e;
    height: 90vh;
    border-top: 10px solid #c92b2b;
    border-bottom: 10px solid #c92b2b;
    ::before{
        content: "";
        position: absolute;
        top: 34px;
        left: 214px;
        border-bottom: 29px solid transparent;
        border-right: 20px solid #c92b2b;
        border-top: 29px solid transparent;
        height: 84.5vh;
        width: 0;
    }
    ::after{
        content: "";
        position: absolute;
        top: 34px;
        right: 214px;
        border-bottom: 29px solid transparent;
        border-left: 20px solid #c92b2b;
        border-top: 29px solid transparent;
        height: 84.5vh;
        width: 0;
    }

CodePudding user response：

I have a generator for such shapes: https://css-generators.com/custom-corners/

Set the angle to be 180deg and use the full configuration for the main element and border-only configuration for the pseudo element:

.box {
  width: 500px;
  height: 300px;
  background: red;
  position: relative;
  /* copied from the generator */
  clip-path: polygon(0 80.00px,80.00px 0,calc(100% - 80.00px) 0,100% 80.00px,100% calc(100% - 80.00px),calc(100% - 80.00px) 100%,80.00px 100%,0 calc(100% - 80.00px));
}
.box:before {
  content:"";
  position:absolute;
  inset:0;
  background: blue;
  /* copied from the generator */
  clip-path: polygon(0 80.00px,80.00px 0,calc(100% - 80.00px) 0,100% 80.00px,100% calc(100% - 80.00px),calc(100% - 80.00px) 100%,80.00px 100%,0 calc(100% - 80.00px),0 80.00px,10px  calc(80.00px   4.14px),10px calc(100% - 80.00px - 4.14px),calc(80.00px   4.14px) calc(100% - 10px),calc(100% - 80.00px - 4.14px) calc(100% - 10px),calc(100% - 10px) calc(100% - 80.00px - 4.14px),calc(100% - 10px) calc(80.00px   4.14px),calc(100% - 80.00px - 4.14px) 10px,calc(80.00px   4.14px) 10px,10px calc(80.00px   4.14px));
}

<div >
</div>