css - CSSでこれらの湾曲したコーナーを取得できますか？

Question

このレイアウトを作成する必要があります。画像などを使用するのではなく、CSSを使用して可能な限り多くのレイアウトを作成したいと思います。

そのため、CSSでこれを行うにはどうすればよいですか？（もしあれば？）

ご覧のとおり、後ろに画像があり、ボタンがパディングでオーバーレイされています。私が苦労しているのは、ボタンの左上と右下のIMAGEに曲線を作成することです（下の写真でそれらを指摘しました）。

どんな助けでも素晴らしいでしょう。

ありがとう

Answer 1

私は危険なCSSを十分に知っているので、すべてのステップを詳しく説明することはできませんが、次のようにアプローチできると思います。

背景画像を2つの別々の画像に分割し、両方とも灰色のボックスの上部の高さでz-indexが0になります。オフセットが異なる（CSSスプライトと同様の）同じ元の画像を参照する2つのを使用できると思いますがdiv、その方法の詳細はわかりません。下の左端はdiv、灰色のボックスが終わるところから始まります。各「画像」の左下隅を丸めdivます。

z-indexが1の灰色のボックスを適切な丸めで追加し、次にz-indexが2の青いボックスを適切な丸めで追加します。

これらすべてを含むブロック要素の背景も、灰色の境界線と一致し、右端の矢印が指している場所を適切に灰色で塗りつぶすために灰色である必要があります。

Answer 2

画像を分割する必要はありません。コンテナdivのみを分割します。

少し詳しく説明します。画像をimgタグのsrc属性に配置する代わりに、背景画像として設定することができます。この手法は、CSSスプライトを操作するときに最も一般的に使用されます。

したがって、一定の幅と高さで最上部のdivがある場合、その中に背景画像を適用しようとすると、非常にうまくフィットすることがわかります。

下部には、2つのdivまたは任意のブロック要素があります。幅と高さを固定して、背景が適用され、実際に表示されるようにしてください。

次に、画像のSEチャンクを調整するためにcssbackground-positionをいじるだけです。

アイデアをわかりやすく説明するために、小さなデモをまとめます。上部に大きなdivがあり、下部に2つの小さなdivがあり、そのうちの2つが同じ背景画像を共有しているが、背景の位置が異なる場合は、丸みのニーズに合わせてcss3border-radiusを安全に追加できます。http://css3generator.com/などのツールを使用して、すべてのブラウザーに互換性レイヤーを簡単に追加することもできます。

Answer 3

それは純粋なcssで非常に簡単に実現できます。表示したページは、マージンなしで3つのdivに分割されています。各divに正しい境界半径を設定するだけで済みます。

Answer 4

これは背景画像の関数であり、それが意味する場合はcss要素ですが、少なくとも標準のCSSでは、セレクターの個別の属性ではありません。CSS3がより普及するまで待ち、それからそれは角半径かそのようなものになります。

さて、それは3つのおそらく3つの別々のdiv、背景画像に「焼き付けられた」穴、またはボタンのためにオーバーレイされているdivです。

それがどのように行われるかを理解するための最良の方法は、それを見つけたページのソースを読むことです。

便宜上：chromeやsafariなどのWebkitベースのブラウザーを使用している場合は、「右クリック」ボタンの上で開発者モードのマウスを有効にして、要素の検査を選択します。それ以外の場合は、必要なものが見つかるまでページソースに注ぐことができます。