如何用纯css实现透明弹出窗口？

Question

纯css，使用背景。

body{
      background: linear-gradient(to left bottom, blue, red) no-repeat;
      width: 100%;
      height: 300px;
   }
  
 .content{
    position: relative;
 }
  
 .popup{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 20px;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 10px 10px;
    z-index: 200000;
 }

.popup::after{
  display: block;
  content: ' ';
  position: absolute;
  margin: auto;
  z-index: 10;
  top: -4px;
  right: 10px;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  background-color: #81007F;
}

<div class="content">
    <div class="popup">test</div>
</div>

内容是透明的，三角形也是透明的。我可以实现一个不透明的，只需将背景颜色放入三角形。虽然它不适用于其他背景。

另一方面，我用svg认识到了这一点。虽然svg也不是很好，但导致宽度和高度不适应。

SVG

 body{
      background: linear-gradient(to left bottom, blue, red) no-repeat;
      width: 100%;
      height:300px;
   }

<svg xmlns="http://www.w3.org/2000/svg" viewBox="160 100">
    <path stroke="#ffffff" fill="none" stroke-width="1" d="M10 10 L10 100 L150 100 L150 10 L130 10 L125 0 L120 10 L10 10"/>
    <text x="20" y="30" stroke="#ffffff">
        test
    </text>
</svg>

Answer 1

如果您不介意使用fieldset和legend，可以试试这个

body{
      background: linear-gradient(to left bottom, blue, red) no-repeat;
      width: 100%;
      height: 300px;
   }
  
 .content{
    position: relative;
 }
  
 .popup{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 20px;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 10px 10px;
    z-index: 200000;
 }

legend{
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  padding: 0;
}

<div class="content">
    <fieldset class="popup"><legend align="right"></legend>test</fieldset>
</div>