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;
}