创建一个复杂的CSS形状(讲泡泡)

Question

什么是你最好的选择或方法来创建一个形状,如附件链接完整CSS中所见,无论如何可能吗？

我使用CSS平行四边形进行了研究和测试,但尚未获得任何好的成功.

在这里看到形状 - >> http://tinypic.com/r/352ge3b/6

Answer 1

我有这个东西,只用一个元素就可以完成 - 它可以完成,我只是觉得它不是这样做的最佳解决方案.

DEMO

HTML:

<div class='speech-bubble'>Hello!</div>

CSS:

.speech-bubble {
  position: relative;
  margin: .5em auto;
  padding: 1em;
  width: 10em; height: 4em;
  border-radius: .25em;
  transform: rotate(-4deg) rotateY(15deg);
  background: #629bdd;
  font: 2em/4 Century Gothic, Verdana, sans-serif;
  text-align: center;
}
.speech-bubble:before, .speech-bubble:after {
  position: absolute;
  z-index: -1;
  content: '';
}
.speech-bubble:after {
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  transform: rotate(2deg) translate(.35em, -.15em) scale(1.02);
  background: #f4fbfe;
}
.speech-bubble:before {
  border: solid 0 transparent;
  border-right: solid 3.5em #f4fbfe;
  border-bottom: solid .25em #629bdd;
  bottom: .25em; left: 1.25em;
  width: 0; height: 1em;
  transform: rotate(45deg) skewX(75deg);
}