どのように純粋な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>