sharp edges with CSS

Issue

I want to make the following shape with sharp corners with CSS and I have tried the following code but it does not give the exact shape, how can I make these sharp corners with CSS?

  h1{
    width:150px;
    height:100px;
    background-color:#ff5722;
    margin:20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color:white;
    z-index:9;
    }

    h1::before{
      content:"";
      position: absolute;
      width:100%;
      height:100%;
      background-color:#ff5722;
      transform: rotate3d(1,0,1,370deg);
      z-index:-5;
    }
   
    h1::after{
      content:"";
      position: absolute;
      width:100%;
      height:100%;
      background-color:#ff5722;
      transform: rotate3d(1,0,1,-370deg);
      z-index:-9;
    }

Solution

Instead of using pseudoelements you can try to use clip-path. In the next example I'm using clip-path with a polygon function. The vertices of the polygon are groups of 2 values, one for the x and one for the y coordinate. The vertices are separated by commas

 h1{
    width:150px;
    height:100px;
    background-color:#ff5722;
    margin:20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color:white;
    
   -webkit-clip-path: polygon(0px 0px, 75px 15px, 150px 0px, 135px 50px, 150px 100px, 75px 85px, 0px 100px, 15px 50px, 0px 0px);
    }

   

<h1></h1>

Answered By - enxaneta