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

纯css，使用背景

正文{
背景：线性渐变（左下、蓝色、红色），无重复；
宽度：100%；
高度：300px；
}
.内容{
位置：相对位置；
}
.弹出窗口{
显示：内联块；
位置：绝对位置；
顶部：10px；
左：20px；
颜色：#ffffff；
边框：1px实心#ffffff；
填充：10px 10px；
z指数：20万；
}
.popup:：之后{
显示：块；
内容：''；
位置：绝对位置；
保证金：自动；
z指数：10；
顶部：-4px；
右：10px；
宽度：5px；
高度：5px；
变换：旋转（45度）；
边框顶部：1px实心#ffffff；
左边框：1px实心#ffffff；
背景色：#81007F；
}

测试

如果您不介意使用

字段集

和

图例

，您可以试试这个

正文{
背景：线性渐变（左下、蓝色、红色），无重复；
宽度：100%；
高度：300px；
}
.内容{
位置：相对位置；
}
.弹出窗口{
显示：内联块；
位置：绝对位置；
顶部：10px；
左：20px；
颜色：#ffffff；
边框：1px实心#ffffff；
填充：10px 10px；
z指数：20万；
}
传奇{
宽度：5px；
高度：5px；
变换：旋转（45度）；
边框顶部：1px实心#ffffff；
左边框：1px实心#ffffff；
填充：0；
}

测试

您可以为同样的内容发布一些代码片段吗？为什么SVG不适合您？当我使用SVG时，我必须指定精确的宽度和高度，而文本的长度是不确定的。另一方面，SVG不是纯css。