8

CSS 3 には少し問題があります。つまり、単一のアイテムでそのようなオブジェクトを作成します。これが私が達成したいことのイメージです：

ここに画像の説明を入力

これが私が持っているものです：

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

そしてjsFiddleのデモ

2 つのパーツ間の角度を丸めるにはどうすればよいですか?

4

3 に答える 3

4

ここから取得した情報は、これを取得できます。

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
ワラッパ

于 2012-12-29T21:54:10.980 に答える
2

簡単な答え: できません。

そこで行ったことで、DIV 要素の後にボックス:が正常に作成されましたが、DIV にテキストを入力し始めると、下のセクションに「流れ込み」ません。

CSS3 で目的を達成するには、少なくとも 3 つの DIV と透明効果が必要ですが、それでもテキスト オーバーフローの問題が発生します。

于 2012-12-29T21:49:23.267 に答える
2

魅力のように働く： 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-29T22:45:07.043 に答える