10

下の（粗い）図の左下隅のような、CSS3で逆に丸みを帯びた角を作成する方法はありますか？

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

おそらく、境界半径をこの手法と組み合わせることができますか？

編集：私は吹き出しを探しているのではなく、左下のポイントの右側をカーブさせる方法を探しています。

4

5 に答える 5

16

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

私たちのマークアップ：

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

私はこれをFirefox3.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）
  • ただし、 http：//code.google.com/p/ie7-js/（生成されたコンテンツが機能するため）のようなものの助けを借りて、丸めなしでIEで機能する可能性があります。
  • 柔軟な高さでどのように機能するかを調べます。
  • フォントファミリー宣言を変更するには:-)
于 2010-05-29T19:30:37.280 に答える
6

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

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

しかし、2番目のものはそうです。背景色を適用した例を次に示します。

http://jsfiddle.net/tGnfb/

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

于 2011-02-03T12:47:26.327 に答える
3

これにより、FFでの効果が得られます。他のブラウザには適切なborder-radiusバリアントを使用してください。基本的divに、背景と同じ色の3つのシステムを使用します。単色の背景でのみ機能します。

<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;
    }
于 2010-05-29T22:18:50.573 に答える
0

そのような外観（吹き出し）を実現しようとしている場合は、そのための画像を使用するのが最善です:)

于 2010-05-29T19:16:33.570 に答える
0

CSSだけを使用してこの問題を解決する方法がいくつかあります。タブにテクニックを使用することにしましたが、吹き出しに簡単に適応させることができます。

ここでは、CSSで逆境界半径を作成する方法の基本的な例について説明します（ここ） 。これは、ボーダーのサイズのトリックを使用して内側を使用します。可能な限り、正しく機能させるために、いくつかのポジショニングを行う必要がある場合があります。

于 2012-07-14T12:28:46.903 に答える