html - デザインにおける CSS と HTML

Question

誰かがCSSで矢印を作成する方法に出くわしたかどうか疑問に思っていました（はい、CSSで知りたいです） - CSSデザインのウェブサイト/チュートリアルは非常に高く評価されます.

このようなもの：

誰でもこれを行う方法を提案できますか?

編集済み：申し訳ありませんが、シェブロンを意味します!!

Answer 1

編集：

ハ、あなたは矢を求めましたが、実際にはシェブロンが欲しかったのです!

必要な形状については、大量のを使用しないのはなぜ<ですか?

それでも問題ない場合は、赤と白の 2 つの三角形を重ねるだけです。</p>

http://cdpn.io/LykHa

.chevron {
  position:relative;
}
.chevron::before {
  position:absolute;
  left:10px;
  top:0;
  content:'';
  display:block;
  border-color:transparent transparent transparent red;
  border-width:20px;
  border-style:solid;
}
.chevron::after {
  position:absolute;
  left:0px;
  top:0;
  content:'';
  display:block;
  border-color:transparent transparent transparent white;
  border-width:20px;
  border-style:solid;
}

---

お楽しみに – http://cdpn.io/yaqGs

ただし、実際にはこのようにはしません。PNG または SVG を使用する可能性があります。私の長方形はピクセル単位で外れているように見えるので、数値を少し調整する必要があるかもしれません。

次のように見えます:

HTML:

<div class='arrow'></div>

CSS:

後ろに三角形、前に長方形があります。

.arrow {
  position:relative;
}
.arrow::after {
  position:absolute;
  left:40px;
  top:0;
  content:'';
  display:block;
  border-color:transparent transparent transparent red;
  border-width:20px;
  border-style:solid;
}

.arrow::before {
  position:absolute;
  top:14px;
  content:'';
  display:block;
  height:10px;
  width:40px;
  background-color:red;
}

Answer 2

どちらかを使用

.foo:before { content: "‹"; }

またはここで説明されているように三角形を作ります。

ところで：あなたの答えに対する反対票は正当化されます。気分が悪い。