1

私が持っているCSS3で直角三角形を作ろうとしています。しかし、アーク/ボウでどのようにithを作ることができますか? （申し訳ありませんが、それを英語に最適に翻訳する方法がわかりません）。

これは私が持っている必要があるものです:

ここに画像の説明を入力

これは可能ですか？そして、どうすればそれを行うことができますか？

それがあれば嬉しいのですが、下から上がスライドするように下からスライドさせる方法も教えていただけると本当に嬉しいです。それさえわかれば、最高です！しかし、それは現時点での私の主な質問ではありません:-)

4

1 に答える 1

1

border-radiusオーバーレイ要素にa を適用することで実行できます。

デモ

.angled-triangle {
    background-color:orange;
    width:200px;
    height:50px;
    position:relative;
    overflow:hidden;
    padding-left:5px;
    background-clip:content-box;
}

.angled-triangle::before {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background-color:white; /*same as element's parent background*/
    border-bottom-right-radius: 99% 90%;
    left:5px; /*push edge out of element*/
}

最新の Chrome および Firefox でテスト済み。必要に応じて自由に値を調整してください。

このアプローチの唯一の欠点は、要素の親の背景と同じbackground-colorものを適用する必要があることです。これは常に実行可能であるとは限りません (背景画像など)。この制限がない別の方法については、以下の更新を確認してください。::beforebody

アップデート

別の実行可能な方法は、放射状グラデーションの背景を使用することです。transparentこの方法は、「空白」領域を塗りつぶすために色を使用するため、上記の方法とは異なり、任意の要素の背景に関する問題はありません。

デモ

.angled-triangle {
    width:200px;
    height:50px;
    background-image: -moz-radial-gradient(0 0, transparent 70%, orange 71.5%);
    background-image: -webkit-radial-gradient(0 0, transparent 70%, orange 71.5%);
    background-image: radial-gradient(top left, transparent 70%, orange 71.5%);
    background-position: 5px 0px;
    background-repeat:no-repeat;
}

上記はorange、三角形にしたい色を表しています。透明とオレンジの1.5%間は単なる「イージング」であるため、境界線がピクセル化されて見えません。これらのブラウザーでテストしていないため、これにはベンダー プレフィックスがありません-ms。-o

于 2013-06-17T13:10:02.800 に答える