5

これを以下のように作成しようとしていますが、完成できませんでした。

左に丸みを帯びた角を作成することしかできませんが、右に傾斜することはできません。

上揃え
(ソース: kerrydeaf.com )

#talkbubble
 {
width: 100px;
height: 35px;
background: #FFCC05;
position: relative;
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
margin-right:50px;
 }

またはこちら http://jsfiddle.net/alma/USEzL/23/

4

2 に答える 2

3

私はこれがあなたが探しているものだと思いますhttp://css-tricks.com/snippets/css/css-triangle/

http://jsfiddle.net/zQKhb/

#talkbubble 
{ 
    width: 100px;
    height: 36px;
    background: #FFCC05;
    position: relative;
    -moz-border-radius:8px 0 0 8px;
    -webkit-border-radius:8px 0 0 8px;
    border-radius:8px 0 0 8px;
    margin-right:50px;

} 

#talkbubble:before
{
    content:"";
    display:block;
    position: absolute;
    right: -36px;
    top:0;
    width: 0;
    height: 0;
    border: 18px solid transparent;

    border-color: transparent transparent #FFCC05 #FFCC05;
}
​
于 2012-11-25T22:58:43.753 に答える
2

右側の三角形のいくつかの重要なポイントが欠けていました。まず第一に、デフォルトでは :before 要素はdisplay: inlineであるため、求めていた効果を作成するには代わりに必要でしdisplay: blockた。

2 つ目はright: 120px、元の位置の右側から 120 ピクセル移動していたことです。つまり、左に押し出され、見えなくなっていました。代わりに、 100% (吹き出しの幅) の負の右位置 (右に移動) が必要でした。そうすれば、それはそれの右側になってしまいます。

第三に、あなたがどのような形を目指していたのかはわかりませんが、それは三角形以外のほとんどすべてでした;)。

私は代わりにこれに行きました：

#talkbubble:before
{
    content:" ";
    display: block;
    position: relative;
    right: -100%;

    width: 0; 
    height: 0; 
    border-left: 0 solid transparent;
    border-right: 20px solid transparent;    
    border-bottom: 35px solid #FFCC05;
}

最初の部分は配置用で、2 番目の部分は実際の三角形を作成するためのものです ( http://css-tricks.com/snippets/css/css-triangle/を参照)。

jsfiddle では、三角形を青色にして、三角形がどこにあるかを正確に確認できるようにしました。角を大きくするには、border-right の幅を変更します。http://jsfiddle.net/USEzL/31/

于 2012-11-25T22:59:05.477 に答える