使用CSS样式创建一个框

Question

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

Answer 1

这里距离我10分钟内的距离很近......

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

有改进的余地 - 边界＆＃39; （实际上是一个投影）只出现在主盒子上，而不是箭头上，但它在保真度方面做得不错：箭头的形状和角度都在那里。

希望有所帮助。

Answer 2

有一个很棒的工具here可以让这个效果变得非常简单。高度可定制。一旦你看到它是如何工作的，很容易调整，例如将箭头向右移动而不是死点。