18

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

画像

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

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

記録のために: 特に複数のブラウザーに関しては、ブラウザーによってレンダリングされたボックスの影と一致する斜めのボックスの影の可能性はほとんどないため、画像を使用したくありません。

白い背景とボックスの影で配置および回転された div の線に沿って考えていましたが、まだ構築できていません。

何か案は？

4

4 に答える 4

27

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

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

サイトにプラグインするだけで準備完了です。

また、「CSS 以外を使用する」という質問で尋ねた CSS3 変換を使用することもできます。

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

 .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 は破棄されず、同じ結果が得られます。

于 2010-11-05T12:26:37.273 に答える
1

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

これは、CSSを使用するための非常に優れたコンパイルとインスピレーションです。楽しみ。

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

于 2010-11-05T12:36:31.390 に答える
1

ローテーションについては、次のものを探しています。

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

ローテーションはCSS3属性であるため、すべてのブラウザーで同じ動作が得られるわけではないことに注意してください。画像で斜めにするよりも、輪郭全体を再現したほうがいいかもしれません。私はそれにアプローチします：

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

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

于 2010-11-05T12:32:01.730 に答える
1

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

リンクが a にあると仮定してul、css が選択ul:beforeして正しい形状にすることができます。

がどうなるかはわかりませんが、試してみるbox-shadow価値はありますし、おそらく JavaScript に頼らずに IE で簡単に調整できるでしょう。

于 2010-11-05T17:34:45.257 に答える