https://i.sstatic.net/gNLMM.png
Creating a pure CSS design using background properties.
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>The entire content area and the triangular popup are designed to be transparent. Although it is possible to create a non-transparent version by adding a background color to the triangle, this approach may not be easily reusable with other backgrounds.
An alternative method involves using SVG elements, which also has its limitations due to fixed width and height values.
SVG graphic implementation:
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>