web-dev-qa-db-ja.com

CSSを使用した矢印ボックス

CSSでこのボックスを作成するにはどうすればよいですか？

矢印付きのボックスを作成する方法を教えるチュートリアルを見てきましたが、私の場合、これらのチュートリアルはどれも適切ではありません。

box

csscss3css-shapes
24
Nesta

周囲の1ピクセルの境界線で要素を作成しました。私は1つを使用しています<div>要素と :beforeおよび:after疑似要素 （ ブラウザサポート ）。メインの長方形には通常の1ピクセルの境界線がありますが、三角形要素は本質的に2つの三角形で、一方が他方よりも暗いです。

明るい三角形は暗い三角形の上にあり、それを隠す効果があります。そして、下にある暗い三角形を示すためにわずかに左にシフトします。結果として生じる錯覚は、三角形自体に1pxの暗い境界線があります。

同様の質問をする質問は次のとおりです。

純粋なCSSを使用して「ツールチップテール」を作成するにはどうすればよいですか？

実際、答えの1つには、この三角形の効果をどのように実現できるかについての優れた説明があります。

https://stackoverflow.com/a/5623150/196921

また、これはボーダーでできるすべての素晴らしいことの素晴らしいリファレンスです（ PSCoderに感謝 ）：

...そして、これは甘いcssジェネレーターです（ David Taiaroaに感謝 ）

とにかく、対応するコードは次のとおりです。

    #arrow {
      width: 128px;
      height: 100px;
      background-color: #ccc;
      border: 1px solid #999;
      position: relative;
    }
    #arrow:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 128px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-left: 12px solid #ccc;
    }
    #arrow:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 129px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-left: 12px solid #999;
    }
<div id="arrow"></div>
33
Hristo

ここ は私が作成したソリューションです

これを行うには2つの簡単な方法があります。最初の、効率の低い方法は、2つの要素を使用することです。 :after疑似要素を利用します。 position:absoluteで:afterを使用した理由は2つあります。

  1. 必要な場所に要素を配置できます
  2. 三角形の端が切り取られるのを防ぎます

三角形を作成する鍵は、borderプロパティを使用することです。 transparentの色が設定された2つの境界線があります。これらの2つの境界線は、行きたい方向の反対です。したがって、直角三角形を作成する場合は、topとbottomを使用します。矢印の形状を決定するのは、最後の境界線です。また、反対方向に進みます。したがって、直角三角形の場合は、border-leftを色付きで使用します。これを適切な高さにするには、配置するボックスの高さの半分をする必要があります

6
Cody Guldner

SVGは、このような形状を作成するための推奨される方法です。シンプルさと拡張性を提供します。

SVGのpolygonまたはpath要素を使用して、上記のような形状を作成し、単色、グラデーション、またはパターンでストローク/塗りつぶしできます。

points要素の形状を定義するために使用される属性はpolygonのみです。この属性は、ポイントのリストで構成されています。各ポイントには、x座標とy座標の2つの数字が必要です。シェイプを閉じるために、最後のポイントから開始ポイントまで直線が自動的に描画されます。

以下は、この形状を作成するために必要なコードです。

<polygon points="10,12 265,10 285,93 265,184 10,184"
         stroke="#333"
         stroke-width="2"
         fill="#eee" />

上記のコードの簡単な説明を以下に示します。

  • points属性は、形状の構造を定義します。
  • stroke属性は、アウトライン/境界線の色を定義します。
  • stroke-widthは、アウトライン/境界線の太さを定義します。
  • fill属性は、塗りつぶされる内部形状の色を定義します。

出力画像：

Polygon Shape

動作例：

body {
  background: #b6cdc7  url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat;
  background-position: center bottom;
  background-size: cover;
  margin: 0;
}

.box {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}
<div class="box">
  <svg width="300" height="200" viewBox="0 0 300 200">
    <polygon points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="#eee" />
  </svg>
</div>

このシェイプは、グラデーションまたはパターンで埋めることもできます。

Polygon shape filled with gradient

動作例：

body {
  background: #b6cdc7 url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat;
  background-position: center bottom;
  background-size: cover;
  margin: 0;
}

.box {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}
<div class="box">
  <svg width="300" height="200" viewBox="0 0 300 200">
    <defs>
      <linearGradient id="grad">
        <stop offset="0" stop-color="#11a798" />
        <stop offset="1" stop-color="#23645d" />
      </linearGradient>
    </defs>
    <polygon id="shape" points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="url(#grad)" />
  </svg>
</div>

SVGのフィルターを使用して、この形状に影を適用できます。

Polygon shape with gradient and shadow

動作例：

body {
  background: #b6cdc7 url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat;
  background-position: center bottom;
  background-size: cover;
  margin: 0;
}

.box {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}
<div class="box">
  <svg width="300" height="200" viewBox="0 0 300 200">
    <defs>
      <linearGradient id="grad">
        <stop offset="0" stop-color="#11a798" />
        <stop offset="1" stop-color="#23645d" />
      </linearGradient>
      <filter id="shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4" />
        <feMerge>
          <feMergeNode />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
    </defs>
    <polygon id="shape" points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="url(#grad)" filter="url(#shadow)" />
  </svg>
</div>
4
Mohammad Usman