CSS3反転した丸い角

Question

CSS3で倒立した丸い角を行う方法はありますか？

/-------\
|       |
|       |
|       |
| ______/
|/ <---The left side is flush (straight), the slant should be rounded

おそらく、ボーダーラジウスを組み合わせることができます このテクニック?

編集：私はスピーチバブルを探しているのではなく、左下のポイントの右側をカーブする方法だけです。

Answer 1

まあ、これは純粋な狂気ですが、確かにこれを達成する方法があります:-)クロスブラウザーではありませんが、見てみましょう：

私たちのマークアップ：

<div id="bubble">
    <p>This is madness!</p>
</div>

私たちのCSS：

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;/* well, madness it is! */
    }
#bubble:before {
    content:'';
    border:20px solid;
    border-color:#fff transparent transparent;
    position:absolute;
    top:110px;
    left:25px;
    z-index:2;
}
#bubble:after {
    content:'';
    border:20px solid;
    border-color:#000 transparent transparent;
    position:absolute;
    top:111px;
    left:25px;
    z-index:1;
}

結果：http://jsfiddle.net/mrlwy/

Firefox 3.6.3でこれをテストしましたが、アイデアは明確です:-)

これが2つです：

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    position:relative;
    -webkit-border-radius:20px 20px 20px 0;
    -moz-border-radius:20px 20px 20px 0;
    border-radius:20px 20px 20px 0;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;
    }
#bubble:before {
    content:'';
    width:20px;
    height:20px;
    background:#fff;
    border-left:1px solid #000;
    position:absolute;
    top:100px;
    left:-1px;
}
#bubble:after {
    content:'';
    -webkit-border-radius:20px 0 0 0;
    -moz-border-radius:20px 0 0 0;
    border-radius:20px 0 0 0;
    border:solid #000;
    border-width:1px 0 0 1px;
    width:20px;
    height:19px;
    position:absolute;
    top:100px;
    left:0;
}

そして結果： http://jsfiddle.net/ajen7/

おそらくこれは多くの方法で強化できます：

• クロスブラウザー（+WebKitとOpera、少なくとも）
• ただし、そのようなものの助けを借りて、それは丸めなしでIESで動作する可能性があります http://code.google.com/p/ie7-js/ （生成されたコンテンツが機能するため）。
• 柔軟な高さでどのように機能するかを知るため。
• フォントファミリー宣言を変更するには:-)

Answer 2

私はまだコメントすることはできませんが、ここに新しい答えがあります（Gryzzlysの答えに関して）：

Gryzzlysの最初の例は、異なる背景色（背景とバブル用）を処理しませんでした。

しかし、2つ目はそうします。以下は、背景色が適用された例です。

http://jsfiddle.net/tgnfb/

（また、Border-Radiusプロパティを追加して、Firefox以外のブラウザの境界線をレンダリングするようにしました）。

Answer 3

これにより、FFの効果が得られます。適切なものを使用します border-radius 他のブラウザのバリエーション。基本的に3を使用します div システム、背景と同じ色の1つ。平らな色の背景に対してのみ機能します。

<div class="top">some text here</div>
<div class="bottom"><div class="bottom2"></div></div>

そしてCSS：

body
    {
    background-color:red;
    }

.top
    {
    display: block;
    width: 200px;
    height: 50px;
    background-color:white;
    padding:5px;

    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomright:10px;
    }

.bottom
    {
    display: block;
    width: 20px;
    height: 20px;
    background-color: white;    
    }

.bottom2
    {
    display: block;
    width: 20px;
    height: 20px;
    background-color: red;  
    -moz-border-radius-topleft:20px;
    }

Answer 4

そのような見た目を達成しようとしている場合（スピーチバルーン）、そのために画像を使用することが最善です:)

Answer 5

CSSのみを使用して、この問題を解決できる方法があります。タブにテクニックを使用することにしましたが、音声バブルに簡単に適応できます。

ここでは、どのように作るかの基本的な例をカバーしています CSSの逆境界半径（こちら）. 。これは、境界線のサイズのトリックを使用して内部を使用します。ただし、可能な限り適切に動作させるためにポジショニングを行う必要がある場合があります。