css - 在 CSS 中创建自定义图形？

Question

是否有可能以某种方式在 CSS 中创建以下内容？ (见附图)

我想要实现的是能够使用 CSS 更改气泡的背景颜色。

一个解决方案是将背景气泡保存为一堆不同的颜色，并根据所选颜色显示正确的背景图像。然而，这不会像我希望的那样动态。

这里有什么想法吗？

Answer 1

像这样的事情是在 CSS Tricks 上使用伪元素完成的。我能想到或预见的唯一限制是围绕对象的边框... CSS Round-out borders

使用 :after 和 :before 伪元素，我能够采用相同的概念并将其应用于创建形状。再次......唯一的问题是边界。另外……它要求它背后的背景是纯色的，这样你就可以模仿背景颜色……这里没有图案或透明度。尝试更改 :after 和 :before 元素的颜色，您将看到它是如何完成的。

JSFiddle Example

<div class="bubble">
    <span>Some Text</span>
</div>

body { background: #999;}

.bubble {
    position: relative;
    width: 150px;
    height: 60px;
    border-radius: 10px 10px 0 10px;
    border: 1px solid #fff;
    background: #444;
}

.bubble:before {
    content: " ";
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 0;
    right: -30px;
    background: #444;
}

.bubble:after {
    content: " ";
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: 0;
    right: -60px;
    background: #999;
    border-radius: 100%;
}