web-dev-qa-db-ja.com

css3で台形/台形を描く方法は？

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

そのような台形（米国：台形）を描きたいのですが、どうすればいいのかわかりません。 css3 3dトランスフォームを使用する必要がありますか？あなたがそれを達成するための良い方法があれば私に教えてください。

csshtml5css3css-shapes
27
CashLee李秉骏

次のようなCSSを使用できます。

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

これらすべての形を作るのは本当にクールです。次の素敵な形をご覧ください。

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

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

46
ElHacker

これは今ではかなり古いので、いくつかの新しいテクノロジーを使用して、いくつかの新しい更新された回答で使用できると思います。

CSS変換パースペクティブ

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

SVG

<svg viewBox="0 0 20 20" width="20%">
  <path d="M3,0 L17,0 L20,20 L0,20z" fill="red" />
</svg>

キャンバス

var c = document.getElementById("myCanvas");
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();
<canvas id="myCanvas" width="200" height="200"></canvas>
43
Stewartside

いくつかのオプションを利用できます。画像をそのまま使用したり、svgで何かを描画したり、css変換で通常のdivを変形したりできます。画像は最も簡単で、すべてのブラウザーで機能します。 svgでの描画はもう少し複雑であり、全面的に機能するとは限りません。

一方、css変換を使用すると、シェイプdivを背景に配置し、実際のテキストを別の要素に重ねて、テキストが歪まないようにする必要があります。繰り返しますが、ブラウザのサポートは保証されていません。

1
Jerry