5

ここに画像の説明を入力してください

右上隅の画像の使用に戻らずに、このダイアログボックスを実装しようとしています。以下はそれに対する私の実装です。

.box{
    -webkit-border-radius: 6px 6px;
    -moz-border-radius: 6px / 6px;
    -khtml-border-radius: 6px / 6px;
    border-radius: 6px / 6px;
    width:33%;
    border: 1px solid #DDD;
    display: inline-block;
    margin-right:10px;
    margin-bottom: 10px;
    max-width: 290px;
    padding: 10px;
}

.triangle-topright { 
    width: 0; 
    height: 0; 
    border-top: 50px solid #fafad6; 
    border-left: 50px solid transparent;
    -webkit-border-top-right-radius: 6px 6px;
    -moz-border-radius-topright: 6px / 6px;
    -khtml-border-top-right-radius: 6px / 6px;
    border-top-right-radius: 6px / 6px;
    float: right;
    margin-top: -10px;
    margin-right: -10px;
}

<div class="box">
   <div class="triangle-topright"></div>
   <h3>title</h3>
   <p>stuff</p>  
</div>

問題は、これがサファリで機能することですが、クロムの場合、-webkit-border-top-right-radius：6px 6px; 競合を引き起こすようです。有効にすると右上が丸くなりますが、三角形は消えます。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

これに対する回避策はありますか？またはこれを行うためのより良い方法はありますか？

ありがとうございました。

4

2 に答える 2

5

動作しているように見える1つの解決策（Chrome、Safari、Firefoxでテスト済み）は、から次の行を削除することです.triangle-topright

-webkit-border-top-right-radius: 6px 6px;
-moz-border-radius-topright: 6px / 6px;
-khtml-border-top-right-radius: 6px / 6px;
border-top-right-radius: 6px / 6px;

代わりoverflow: hidden;に、.boxcssに追加するだけです。

デモ： http： //jsfiddle.net/BcrKH/

于 2012-10-30T21:07:42.133 に答える
3

CSSで三角形を作成するというあなたの考えは、問題を考えすぎていると思います。ここでは、CSSグラデーションの方が簡単な解決策のようです。

急激な色の変化だけのグラデーションを作成することも可能で、斜めにすることもできるので、まさにあなたが求めている解決策を提供できるようです。

これで、質問に対する別の方法が確立されました。参照用に、このような他の質問を参照できます。色が混ざり合うことなく（急激な色の変化）、右に70％ずれた斜めのcssグラデーションを作成するにはどうすればよいですか？

CSSグラデーションの唯一の問題は、古いバージョンのIEではサポートされていないことです。ただし、これは解決できます。IE6 / 7/8にfilterは、このトリックを実行できる独自のグラデーション作成方法がありますが、私の好みはCSS3Pieを使用することです。これにより、古いIEバージョンでも標準のCSS3グラデーションを使用できます。

お役に立てば幸いです。

于 2012-10-30T22:27:37.050 に答える