1

画像を使わずにタイトルだけで右向きの矢じりを作ろうとしています。しかし、私はそれを理解することはできません。誰かが私を助けてくれることを願っています。

HTML :

<h4>This is for My Title</h4>

CSS :

h4 {
  color: #666;
  background: red;
  width: 250px;
  display: block;
  padding: 3px 10px;
}

h4:after { 
  content:" ";
  width: 0; 
  height: 0; 
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 14px solid green;
  margin: 0 10px;

}

これはJsFiddleです

どんな助けでも大歓迎です。ありがとうございました。

4

3 に答える 3

2

にはの:after表示がinlineあるため、 を無視していheightます。を に設定displayしinline-blockます。

h4:after {
    display: inline-block;
    /* ... */
}

それを試してみてください。

于 2013-07-27T03:34:12.780 に答える
1

これを実現するためのより簡単な方法は、次の HTML/CSS を使用することです。

H4矢印のプレースホルダーとなる要素を に追加しました。

HTML

<h4>This is for My Title <span class="arrow-right"></span></h4>

CSS

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid green;
    display: inline-block;
}

デモ フィドル: http://jsfiddle.net/pratik136/FHShC/2/

CSS 提供: http://css-tricks.com/snippets/css/css-triangle/

于 2013-07-27T03:41:23.113 に答える
1

「▶」BLACK RIGHT-POINTING TRIANGLE (U+25B6) のような適切な文字を使用します。

h4:after { 
  content:" \25b6";
}

ただし、特殊文字にはフォントの問題が発生する可能性があるため、通常は画像を使用する方が信頼性が高くなります。画像では、必要な正確な形状を選択することもできます.

于 2013-07-27T03:41:59.930 に答える