How can i make a skewed slanting div box - html

Question

Hello I am a beginner in CSS and HTML. I would like to create something a div like this for my school project.
I tried the transform:skewed(25deg) but it wont make my box div balance.

Answer 1

As the comments mention, you can achieve that kind of slant by using clip-path. You just need to make sure to match the path on both your inner + outer elements in order for the border to line up correctly.
.outside {
position: relative;
width: 70vmin;
height: 70vmin;
background: red;
-webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
}
.inside {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
background: black;
-webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
}
<div class="outside">
<div class="inside"></div>
</div>

Answer 2

If you need a transparent background simliar to the picture you ahve you have to use 2 elements for the top and the bottom and cut it away like this:
:root {
--thickness: 10px;
--color: red;
--width: 50vw;
--total-height: 80vh;
--offset-height: 20vh;
}
.clip-path-top {
width: var(--width);
height: var(--offset-height);
background-color: var(--color);
clip-path: polygon(0 0, var(--thickness) 0, 100% calc(100% - var(--thickness)), 100% 100%, calc(100% - var(--thickness)) 100%, var(--thickness) var(--thickness), var(--thickness) 100%, 0 100%);
}
.clip-path-bottom {
width: var(--width);
height: calc(var(--total-height) - var(--offset-height));
background-color: var(--color);
clip-path: polygon(0 0, var(--thickness) 0, var(--thickness) calc(100% - var(--thickness)), calc(100% - var(--thickness)) calc(100% - var(--thickness)), calc(100% - var(--thickness)) 0, 100% 0, 100% 100%, 0 100%);
}
/* for demo-purpose only */
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: gray;
}
<div class="clip-path-top"></div>
<div class="clip-path-bottom"></div>

Answer 3

Apply the skew to a pseudo element:
.box {
width: 250px;
height: 250px;
border-bottom: 5px solid red;
position: relative;
overflow: hidden;
}
.box:before {
content: "";
position: absolute;
inset: 0;
border: 5px solid red;
border-bottom: none;
transform-origin: left;
transform: skewY(10deg); /* adjust this */
}
<div class="box"></div>