CSS how to get a rectangle box divided NOT by a horizontal line but a slanted/inclinded line?

Question

rectangle divided by a slanted line How to achieve this in css?

Answer 1

.container {
    width: 200px;
    height:100px;
    border: 1px solid grey;
    overflow: hidden;
    position: relative; 
    z-index:1;
}
.container .title{
    width: 120%;
    height: 60px;
    background:green;
    transform: rotate(-5deg);
    margin-top: -10px;
    margin-left: -10%;
    text-align:center
}
.container .title span {
    display: inline-block;
    transform: rotate(5deg);
    margin-top: 20px;
    color: #fff;    
}

<div class="container">
    <div class="title"><span>Standard</span></div>
</div>

Answer 2

You can achieve that easily without any complex calculation by using online tool https://bennettfeely.com/clippy/

div {
    width: 250px;
    height: 200px;
    background-color: lightBlue;
    clip-path: polygon(0 0, 100% 0, 100% 24%, 0 37%);
}

<div>

</div>