闲话不说，直接上代码！

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title><style type="text/css">    
      .div1{
          position: absolute;
          top: 200px;
          min-height: 100px;
          width: 400px;
          border: 1px solid ;
        }
        
      .div1::after{
          content: "";
          border: 30px solid transparent;
          border-left-color: white;
          position: absolute;
          top: 10px;
          left: 399px;
        }
      
        .div1::before{
          content: "";
          border: 30px solid transparent;
          border-left-color: black;
          position: absolute;
          top:10px;
          left: 400px;
           
          }
    </style>
  </head>
  <body>
    <div class="div1">
      
    </div>

  </body>
</html>

效果如下

透明对话框_css