0

箭头

所以我正在使用来自 zurb 的基础，并且我正在尝试完成上图的设计。我想出了几种不同的方法，但最可靠的方法就是这样。

.large-2.columns
  %h3 Our Products
.large-10.columns
  .arrow

如您所见，这将使我们的产品和关于我们部分的箭头具有相同的宽度。我正在寻找的是确保满足这些需求的最有效方法：

  • 箭头和 h3 是可变宽度
  • 箭头的质量不会随着宽度的变化而变化（线/箭头/等都具有相同的宽度）
  • 最好不要有 TON 的标记或 TON 的 sass。

谢谢！

4

1 回答 1

0

我建议使用 :before 和 :after 伪元素（连同内容）来实现这一点。除非您需要支持 IE6/7，否则我猜您将不得不做一些更丑陋的事情。

请记住 :before 在目标元素内插入内容（但在目标元素内的任何子元素之前，对于 :after 元素也是如此 - 只是它将在任何子元素之后注入内容）。但是，如果我们使用绝对定位，我们仍然可以只使用一个 hr 元素。

CSS：

h3 {
  font-size: 0.85em;
  float: left;
}
hr {
  clear: none;
  background-color: #fff;
  margin-top: 0.75em;
  border-style: solid;
  border-color: green;
  border-width: 0 0 1px 0;
}
hr:before {
  content: '';
  position: absolute;
  background-color: red; /* can remove this, only for testing */
  display: block;
  width: 20px;
  height: 10px;
  margin-top: -5px;
  background-position: 0 0; /* set to correct pos for your sprites.gif background-image */
}
hr:after {
  position: absolute;
  background-color: red; /* can remove this, only for testing */
  right: 0.9375em;
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background-position: 0 0;
}

HTML

<div class="row">
  <div class="large-12 columns">
    <h3>OUR PRODUCTS</h3><hr>
  </div>
</div>

为您的箭头使用背景图像精灵，并输入正确的 xy 坐标。（背景颜色：红色只是为了表明这是有效的）

于 2013-09-21T16:02:23.110 回答