Question

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

enter image description here

我想要实现的是能够使用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%;
}

Answer 2

其他选项是很好的css方法，但只有css才能实现类似形状的边框。

在我的方法中，我将使用svg图像。

这是图片中的路径，您可以看到可以在svg图片上使用类和ID。

<path class="bubBg" fill="#7C7C7C"

以下是您可以使用的JSFIDDLE。

（目前我相信这是完全设计的最佳选择，但迈克尔的答案非常好）

Answer 3

这就是我所做的：不完全相同的泡泡但是相似，请查看

小提琴：http://jsfiddle.net/zD3bV/1/

<强> CSS

#speech-bubble {
  width: 120px; 
  height: 80px; 
  background: purple;
   top: 2px;
  position: absolute;
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  border-radius: 10px;
}
#speech-bubble:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid purple;
  border-bottom: 13px solid transparent;
  margin: 13px 0 0 -25px;
}
 #talk-bubble {
    width:120px;
    height:80px;
    background:blue;
    position:relative;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
  }
  #talk-bubble:before {
        content:"";
        position:absolute;
        right:100%;
        top:26px;
        width:0;
         height:0;
        border-top:13px solid transparent;
         border-right:26px solid blue;
        border-bottom:13px solid transparent;
   }

另外，搜索css形状你更有可能获得最佳效果，然后你可以根据需要修改它们

在CSS中创建自定义图形？

3 个答案: