Question

我试图在不使用图像的情况下单独使用标题制作右箭头。但我无法弄明白。希望有人能帮助我。

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

任何帮助将不胜感激。谢谢。

Answer 1

:after的显示为inline，因此忽略了height。将display设置为inline-block。

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

<强> Try it.

Answer 2

一种更好，更简单的方法是使用以下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/

Answer 3

使用合适的字符，例如“▶”BLACK RIGHT-POINTING TRIANGLE（U + 25B6），例如与

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

但是，使用图像通常更可靠，因为特殊字符可能存在字体问题。图像还可以让您选择所需的确切形状。

不使用图像制作箭头

3 个答案:

HTML

CSS