如何用純css實現透明彈出？

-2

純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>

來源

2017-08-01 hirra

能否請您發佈一些片斷的一樣嗎？ – brijrajsinh

爲什麼SVG不適合你？你打算如何使用它？ – Miro

當我使用SVG時，我必須指定確切的寬度和高度，而文本的長度不確定。換句話說，SVG不是純粹的CSS。 – hirra

如果你不使用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>

來源

2017-08-01 07:34:28

如何用純css實現透明彈出？

回答

相關問題