Try it Live

​x
 
<!DOCTYPE html>
<html>
  <head>
    <style>
     .div1 .main-val {
      width:200px;
      height:200px;
      padding:30px;
      margin-left:50px;
      border:2px dotted black;
      text-align:center;
     }
     
     .div1 .perspective-val {
      width:200px;
      height:200px;
      border:12px;
      border-style:solid;
      border-color: coral purple coral purple;
      -webkit-transform: perspective(400px) rotateY(45deg);  /*Safari and Chrome*/
      transform: perspective(400px) rotateY(40deg);
     }
    </style>
  </head>
  <body>
    <div class="div1">
      <div class="main-val">
        <div class="perspective-val">Example of CSS Transform Perspective</div>
      </div>
    </div>
  </body>
</html>
​