現時点で忙しいプロジェクトにどのようにアプローチするかという疑問に遭遇しました。奇妙なフォームのヘッダーを作成する必要があります。このプロジェクトは、最新のデバイスで応答する必要があります。CSS の形状などのヘルプを検索するさまざまなブログをチェックしました。これは私を助けましたが、これに最適なアプローチがどれかわかりません。
http://css-tricks.com/examples/ShapesOfCSS/
希望するデザインは、次の画像のようなものです。
ご覧のとおり、両側に 2 つの曲線があり、これらも互いに異なります。これをヘッダー要素にしたいと思います。1つの要素だけで作成することはできますか? CSS でこの種の不規則なフォームに到達する方法について何か提案はありますか?
border-top-left-radiusと を使用しborder-top-right-radius、それらを異なる値に設定することで、これを実現できます。
4 つの角すべてに対して境界線の半径を個別に設定する場合は、より一般的なborder-radiusプロパティを使用します。その構文は次のとおりです。
border-radius: top-left top-right bottom-right bottom-left
border-radius古いバージョンの IE (IE8 以前) を除くすべての主要なブラウザーでサポートされています。
古いバージョンの IE (6、7、8) で作業したい場合は、 CSS3 PIEborder-radiusの使用を検討できます。
これは、質問の目的のヘッダーのコードペンです。
ヘッダーのサイズによっては、数字をいじる必要があります。しかし、これは正しい方向にあなたをキックオフするはずです.