どのようにcss3で台形/台形を描くのですか?

モバイルSafariを使用して http://m.google.co.jp のページに移動すると、美しいバーが表示されますページの上部に表示されます。

私はそのような台形(米国:台形)を描きたいと思っていますが、どのようにか分かりません。私はcss3 3d transformを使うべきですか?それを達成するための良い方法があれば教えてください。

23
おそらく私は何かが欠けているかもしれませんが、bodyタグに適用されたグラデーションイメージではありませんか?もしそうなら、あなたはcss3グラデーションを使うことができます...私は "台形"が何を意味するのか分かりません。
追加された 著者 chovy,
あなたはナビゲーションバーを意味しますか?それはイメージです: google.com/mobile/ images/mgc3/mgc-body-toolbar-bg-banner.png
追加された 著者 Blender,
米国では、1対の平行な辺を有する四辺形については「台形」とし、平行な辺を持たない四辺形については「台形」を言う。米国以外:「台形」=米国::「台形」、米国::「台形」は単に「不規則」です。知っているのは戦闘の半分〜
追加された 著者 Andrew Kozak,

3 答え

あなたはこのようにいくつかのCSSを使うことができます:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}
<div id="trapezoid"></div>
</div> </div>

このすべての形を作るのは本当にクールです。より良い形を見てみましょう:

http://css-tricks.com/examples/ShapesOfCSS/

編集: このCSSはDIV要素に適用されます

38
追加された
私はこのウェブサイトを見たことがありましたが、昨夜は忘れました!私は問題を解決しました。本当にありがとうございます!
追加された 著者 CashLee李秉骏,
@キシャン:応答のある台形の場合、この答えをチェックしてください。 stackoverflow.com/a/26628030/933633
追加された 著者 TheCarver,
私は、応答可能なtrapziodの形をしたい。それについて何か教えていただけますか?
追加された 著者 Kishan,
あなたは大歓迎です、それは私のお気に入りのサイトの一つです、そこに多くの有益な情報があります。
追加された 著者 ElHacker,

これはかなり古くなっているので、いくつかの新しい技術で新しい更新された回答を使うことができると思います。

CSS変換のパースペクティブ

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}
<div class="trapezoid"></div>
</div> </div>

SVG

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

 
 
</div> </div>

キャンバス

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

var c = document.getElementById("myキャンバス");
var ctx = c.getContext("2d");
ctx.moveTo(30, 0);
ctx.lineTo(170, 0);
ctx.lineTo(200, 200);
ctx.lineTo(0, 200);
ctx.fillStyle = "#FF0000";
ctx.fill();
<�����������������������������
�iv> </div>
26
追加された

利用できるオプションはいくつかあります。単純にイメージを使用したり、svgで何かを描画したり、css変換で通常のdivを歪めたりすることができます。イメージは最も簡単で、すべてのブラウザで機能します。 svgでの描画はもう少し複雑で、ボード全体で動作することは保証されていません。

一方、CSS変換を使用すると、バックグラウンドでシェイプdivを持っていなければならず、実際のテキストを別の要素に重ねて、テキストも歪まないようにする必要があります。ブラウザのサポートは保証されません。

1
追加された