Para poder rotacionar um objeto no css use o
transforme: rotate(Xdeg)
E para os cantos poderem ficar nessa forma triangular pode se usar o after e o before, primeiro só precisa fazer com que as medidas que nele serão usadas se tornem relativas à div original, depois basta mexer nas medidas que precisar
<style>
.cont{
width: 250px;
height: 150px;
border: 1px solid rgb(121, 121, 121);
}
.inf{
background-color:rgb(73, 73, 73);
margin: 2%;
height: 140px;
}
.diagonal{
background-color: rgb(5, 160, 13);
position: fixed;
top: 15px;
transform: rotate(-45deg);
}
.diagonal::before, .diagonal::after{
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.diagonal::before {
top: 0;
left: -20px;
border-width: 0 0 18.2px 20px; /* Triângulo esquerdo */
border-color: transparent transparent rgb(5, 160, 13) transparent;
transform: rotate(90deg);
transform: scaleX(1);
}
.diagonal::after {
top: 0;
left: 28.3px;
border-width: 0 0 18.2px 20px; /* Triângulo direito */
border-color: transparent transparent rgb(5, 160, 13);
transform: rotate(90deg);
transform: scaleX(-1);
}
</style>