web-dev-qa-db-ja.com

45度の角度+ボックスシャドウ-CSSのみを使用

CSSのみを使用して次のデザインを再作成する必要があります。

image

あなたが写真に見ているのはウェブサイトコンテナの上部です-「リンク」はメインメニューの一部です。

現状では、コンテナを作成しましたが、画像を使用せずにナビゲーションを傾斜させる方法はわかりません。

記録のために：特に複数のブラウザに関しては、ブラウザでレンダリングされたボックスシャドウと一致する傾斜上のボックスシャドウの可能性がほとんどないため、画像を使用しません。

白い背景とボックスシャドウを使用して配置および回転されたdivの線に沿って考えていましたが、まだ作成できませんでした。

何か案は？

htmlcsscss3css-shapes
18
Sam

IEでも要素を変換するのに役立つ サンドペーパー と呼ばれるものがあります！

.myDiv {
    -sand-transform: rotate(45deg);
}

サイトにプラグインするだけで設定が完了します。

また、CSS3変換を使用することもできます。これは、「CSSのみを使用して」という質問で尋ねました。

これを行うには、次を使用します。

 .myDiv {
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}

そして、Operaと同等のJoshとRobertに感謝します。

-o-transform: rotate(45deg);

Internet Explorerは、フィルターが適用されているテキストにClearTypeをドロップします。ただし、メイン要素内に空の追加要素を追加し、この追加要素にフィルターを適用できます。この後、ClearTypeは損なわれず、同じ結果が得られます。

28
Kyle

ローテーションのために、あなたは探しています：

-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);

回転はCSS3属性であるため、すべてのブラウザーで同じ動作をするわけではないことに注意してください。画像で傾斜を作成するよりも、アウトライン全体を再作成した方がよいでしょう。私はそれにアプローチします：

  1. ヘッダーセクションには、傾斜、影、メニューの背景、コンテンツの上部にあるパディングがあり、スクリーンショットとほとんど同じです。
  2. 影付きでコンテンツ全体を繰り返し表示できる画像。
  3. フッターセクション。

また、外部ライブラリを使用してCSS3属性を再作成することもできますが、画像は、レンダリング方法を知っている最も簡単な方法です。

1
Robert

http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ のテクニックを使用できると思います

これは本当に素晴らしいコンパイルであり、CSSを使用するためのインスピレーションです。楽しい。

PS：CSS3変換よりも安全です。

1
Dave

回転は不要のようです。 CSS三角形効果を使用してみます。

あなたのリンクがulにあると仮定し、CSSがul:beforeを選択して正しい形にできるようにします。

box-shadowで何が起こるかわかりませんが、一見の価値があり、おそらくJavaScriptに頼らずにIEで調整する方が簡単です。

1
zzzzBov