39

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

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

4

5 に答える 5

76

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

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>

于 2016-01-26T13:02:39.933 に答える
68

次のような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要素に適用されます

于 2011-10-27T20:36:40.073 に答える
3

簡単な方法

任意の形状を描画するには、以下のようにCSSclip-pathプロパティを使用できます。

無料のオンラインエディターを使用して、このコードを生成できます（例：https ：//bennettfeely.com/clippy/ ）

.trapezoid {
    clip-path: polygon(0 0, 100% 0, 84% 41%, 16% 41%);
}

再利用可能なコードを使用

より適応性が必要な場合は、次のようなSassミックスインを定義できます。

@mixin trapezoid ($top-width, $bottom-width, $height) {
    $width: max($top-width, $bottom-width);
    $half-width-diff: abs($top-width - $bottom-width) / 2;

    $top-left-x: 0;
    $top-right-x: 0;
    $bottom-left-x: 0;
    $bottom-right-x: 0;

    @if ($top-width > $bottom-width) {
        $top-left-x: 0;
        $top-right-x: $top-width;
        $bottom-left-x: $half-width-diff;
        $bottom-right-x: $top-width - $half-width-diff;
    } @else {
        $top-left-x: $half-width-diff;
        $top-right-x: $bottom-width - $half-width-diff;
        $bottom-left-x: 0;
        $bottom-right-x: $bottom-width;
    }

    clip-path: polygon($top-left-x 0, $top-right-x 0, $bottom-right-x $height, $bottom-left-x $height);
    
    width: $width;
    height: $height;
}

そして、このような目的の要素に使用します（ここで、パラメーターは$ top-width、$ bottom-width、$ heightです）：

.my-div {
    @include trapezoid(8rem, 6rem, 2rem);
}
于 2020-12-19T07:10:23.987 に答える
1

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

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

于 2011-10-27T19:00:18.347 に答える
0

これは古い質問です...しかし、言及されていないメソッドを追加したいと思います。半透明の半色のグラデーションで三角形を描くことができ、3つのグラデーション形状から台形を作ることができます。これがサンプルコードです。理解を深めるために、3つのブロックが異なる色で描かれています。

#example {
    width: 250px;
    height: 100px;
    background-image:
        linear-gradient(to top left, red 0 50%, transparent 50% 100%),
        linear-gradient(to top right, green 0 50%, transparent 50% 100%),
        linear-gradient(blue 0 100%);
    background-size:
        20% 100%, 20% 100%, 60% 100%;
    background-position:
        left top, right top, center top;
    background-repeat: no-repeat;
}
<div id="example"></div>

于 2022-02-02T14:17:56.780 に答える