创建一个复杂的CSS形状（讲泡沫） [英] Create a complex CSS shape (speaking bubble)

问题描述

您最好的选择或方法是什么是最好的选择或方法来创建一个形状，如在附件链接中看到完整的CSS，是可能的

我做了研究和测试与CSS平行四边形例如但没有任何好的成功。

查看此处的形状 - >>

HTML

 < div class ='speech-bubble'>您好！< / 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世纪哥特式，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;左：1.25em; 
 width：0; height：1em; 
 transform：rotate（45deg）skewX（75deg）; 
} 
  

What would be your best option or method to create a shape as seen in the attachment link full CSS and is that possible anyway??

I did research and testing with CSS parallelogram e.g. but not with any good succes yet.

See the shape here -->> http://tinypic.com/r/352ge3b/6

解决方案

I had this thing that it could be done with just one element - and it can be done, I just don't think it's exactly the best solution to do it like this.

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

这篇关于创建一个复杂的CSS形状（讲泡沫）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！