45度の角度 +ボックスシャドウ - 何も使用していないCSS

StackOverflow https://stackoverflow.com/questions/4105772

  •  29-09-2019
  •  | 
  •  

質問

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

image

写真に表示されているのは、ウェブサイトコンテナの上部です。「リンク」はメインメニューの一部です。

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

記録：ブラウザによってレンダリングされたボックスシャドウと一致するスラントのボックスシャドウの可能性として、特に複数のブラウザに関しては、画像をボックスシャドウの箱の影の可能性として使用したくありません。

私は、白い背景とボックスシャドウを備えた配置され、回転したdivの線に沿って考えていましたが、まだそれを構築することができませんでした。

何か案は？

役に立ちましたか？

解決

呼ばれるものがあります サンドペーパー 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*/
}

そして、オペラに相当するジョシュとロバートに感謝します： 

-o-transform: rotate(45deg);

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

他のヒント

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

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

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

  1. ヘッダーセクションには、スラント、影、メニューの背景、コンテンツの上部にあるパディングがあります。
  2. シャドウでコンテンツの全身を繰り返すことができる画像。
  3. フッターセクション。

また、外部ライブラリを使用してCSS3属性を再現しようとすることもできますが、画像がどのようにレンダリングするかを知っているため、画像が最も簡単な方法かもしれません。

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

これは、CSSを使用するための本当に素晴らしい編集とインスピレーションです。楽しみ。

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

回転は不要なようです。 CSSトライアングル効果を使用してみます。

私はあなたのリンクがaにあると仮定します ul したがって、CSSを選択できます ul:before そして、それを正しい形にします。

何が起こるかわかりません box-shadow しかし、それはショットの価値があるかもしれませんし、おそらくJavaScriptに頼らずにIEで整列するのが簡単になるでしょう。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top