【问题标题】：Create a complex CSS shape (speaking bubble)创建一个复杂的 CSS 形状（说话泡泡）
【发布时间】：2015-12-23 16:06:01
【问题描述】：

在附件链接完整 CSS 中看到的创建形状的最佳选择或方法是什么，这可能吗？？

我使用 CSS 平行四边形进行了研究和测试，例如但还没有取得任何好的成功。

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

【问题讨论】：

到目前为止你得到了什么？ - 尽可能多地提供有关您取得的任何进展的信息是个好主意。
您必须使用多个元素和大量 CSS3 转换，但这是可能的。先自己试试，遇到问题再回来；）
你是对的！稍后我将分享代码。现在不在我的工作站上。
还有一个有趣的问题是；你们会怎么做？是否值得付出所有努力在 CSS 中制作这个形状。或者你会只使用图像（通过精灵）导致额外的请求..
是的，你可以做到。实际上很容易。我现在做一个演示。 :)

标签： css border shape css-shapes

【解决方案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);
}

【讨论】：

【解决方案2】：

不完全是，你在找什么，但我在玩 CSS3 的透视和旋转并做了这个：

body {
    color: #FFF;
    font-family: sans-serif;
}

.outer {
    position: relative;
    height: 120px;
    width: 120px;
    margin: 50px;
    padding:10px;
    perspective:150;
    -webkit-perspective:150;
}

.inner {
    border-radius: 15px;
    padding:50px;
    position: absolute;
    background-color: #80BFFF;
    transform: rotateY(10deg);
    -webkit-transform: rotateY(10deg);
    box-shadow: -4px -4px 0px #3399FF;
}

.inner:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 20px;
    top: 115px;
    border: 15px solid;
    border-color: #80BFFF transparent transparent #80BFFF;
}

这是我的 HTML 内容

<div class="outer">
    <div class="inner">Yay!</div>
</div>

【讨论】：

谢谢！我会试试这个并回复我的想法。