html - 创建具有CSS样式的框

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

最佳答案

这是我十分钟内就能到达的地方...

jsFiddle Demo

#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);
}

有改进的余地-“边框”（实际上是阴影）仅出现在主框上，而不是箭头上，但是在保真度方面做得还不错：箭头的形状和角度都在那里。

希望能有所帮助。