Html 使用CSS样式创建一个框

---

我需要创建一个框，如所附的CSS样式图像所示。是否可以使用CSS，或者我必须使用图像。

有一个非常好的工具，可以使这种效果非常简单。高度可定制的。一旦你能看到它是如何工作的，就很容易调整，例如，将箭头进一步向右移动，而不是移动到死点。

这里是我在10分钟内能达到的最接近的地方

还有改进的余地-边框（实际上是一个阴影）只出现在主框上，而不是箭头上，但是它在保真度方面做得很好：箭头的形状和角度都在那里

---

希望能有所帮助。

所以。。。你试过什么？给你：

#bubble {
  width: 300px; 
  height: 180px; 
  background: #ddd;
  box-shadow: 0 0 1px #333;
  position: absolute;
}
#bubble:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 36px solid transparent;
  border-left: 18px solid #ddd;
  border-right: 13px solid transparent;
  margin: 180px 0 -25px 240px;
  transform:rotate(10deg);
  -webkit-transform:rotate(10deg);
  -ms-transform:rotate(10deg);
}