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 回答