CSS 3 - 在状态之前和之后的圆角

我有一个CSS 3的小问题，即我将创建这样一个对象与单个项目。这里是什么，我想实现的图像：CSS 3 - 在状态之前和之后的圆角

enter image description here

这里是有我：

CSS：

body{ 
background:grey; 
    padding:10px; 
} 
#talkbubble { 
margin:0 auto; 
box-shadow: 3px 10px 7px #deefe5; 
    width: 590px; 
    height: 160px; 
    background: white; 
    position: relative; 
    border-radius:10px; 
    border-bottom-left-radius:0px; 
} 
#talkbubble:before { 
box-shadow: 10px 10px 5px #deefe5; 
    content:""; 
    position: absolute; 
    background:white; 
    top: 100%; 
    width: 228px; 
    height: 62px; 
    border-bottom-left-radius:   10px; 
    border-bottom-right-radius:   10px; 

} 
#talkbubble:after{ 
    content:""; 
    position: absolute; 
    top:100%; 
    left:228px; 
    border-top: 10px solid white; 
    border-right: 10px solid transparent; 
    background:white; 


}

HTML：

<div id="talkbubble"></div>

And a jsFiddle demo

我该如何四舍五入两个部分之间的角度？

来源

2012-12-29 Dawid Stachów

我不知道，但是这可能会帮助您：HTTP：// WWW .w3.org/TR/css3-background /＃角落裁剪 – Victor

您不能。关闭的问题。 –

简答：你不行。

你在那里做了什么已经成功创建了一个框：在之后的DIV元素，但是如果你开始在DIV中输入文本，它将不会“流入”底部部分。

为了达到你在CSS3中的目标，你至少需要3个DIV和透明度效果，而且你仍然会遇到文本溢出的问题。

来源

2012-12-29 21:49:23

您可以通过创建一个.PNG图像作为背景并使用足够的**填充**来确保文本很好地适合泡泡，从而节省您的时间。你也可以得到这样的结果：大约10％的用户仍然使用IE8以外的非CSS3浏览器。 –

从 here

两者的信息，你可以得到这样的：

body 
{ 
    background:grey; 
    padding:10px; 
} 
#talkbubble 
{ 
    margin:0 auto; 
    box-shadow: 3px 10px 7px #deefe5; 
    width: 590px; 
    height: 160px; 
    background: white; 
    position: relative; 
    border-radius:10px; 
    border-bottom-left-radius:0px; 
} 
#talkbubble:before 
{ 
    box-shadow: 10px 10px 5px #deefe5; 
    content:""; 
    position: absolute; 
    background:white; 
    top: 95%; 
    width: 228px; 
    height: 62px; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
} 
#talkbubble:after 
{ 
    content:""; 
    position: absolute; 
    top:100%; 
    left:228px; 
    background:-webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 10px, white 10px); 
    width: 10px; 
    height: 10px; 
}

http://jsfiddle.net/uCRMQ/2

//只是背景阴影不起作用。现在背景阴影适用于此（在此大小）。

了Lg
warappa

来源

2012-12-29 21:54:10

WORX就像一个魅力： http://jsfiddle.net/42DJh/7/

只是这种替换：

#talkbubble:after{ 
    content:""; 
    position: absolute; 
    top:100%; 
    left:228px; 
    border-top: 10px solid white; 
    border-right: 10px solid transparent; 
    border-top: 10px solid transparent; 
    border-left: 10px solid transparent; 
    border-top-left-radius:10px; 
    background:transparent; 
    box-shadow: -3px -3px 1px white; 
}

来源

2012-12-29 22:45:07

And Richards关于浮动的问题不是问题，只需将'height：160px'替换为'min-身高：160px'，一切都平稳漂浮; –

CSS 3 - 在状态之前和之后的圆角

回答

相关问题