创建一个复杂的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); 
} 

Answer 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>