我正在尝试创建一条破碎的水平线，两端带箭头，中间带文字

Question

我正在尝试创建一个响应水平线，两端带箭头，中间带文字。我找到了使用之前和之后使用中间文本创建线的方法，但是我对如何在任一端合并箭头感到难过。理想情况下，我想使用字体图标，但如果有必要，我愿意使用通用的html箭头。

Answer 1

这样你就可以实现它：

• 将图像作为背景。
• 居中对齐文字。
• 为文本添加一些背景颜色，与父背景颜色相匹配。

<强>段

＆＃13;

＆＃13;

h1 {
  font-size: 15pt;
  font-weight: normal;
  text-align: center;
  background: url("http://www.signsbypost.com/sites/default/files/irun/uc_product/images/SELF-ADHESIVE-VINYL-STICK-ON-ARROW-DOUBLE-HEAD-5271.jpg") center center no-repeat;
  background-size: contain;
}

h1 span {
  display: inline-block;
  padding: 5px;
  background-color: #fff;
}

＆＃13;

<h1><span>Hello</span></h1>

＆＃13;

＆＃13;

＆＃13;

预览

Answer 2

仅使用没有图像的CSS。

.line {
 margin-top:8px;
 width:10%;
 background:blue;
 height:3px;
 float:left;
 position:relative;
}
.arrowed .text{
 padding: 0 10px 0 10px;
}
.arrowed span{
float:left;
display:block;
}

.line.first:before {
  content: '';
  position: absolute;
  right: 100%;
  top: -3px;
  display:inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid blue;
}

.line.second:after{
  content: '';
  position: absolute;
  left: 100%;
  top: -3px;
  display:inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid blue;
}

<p class="arrowed">
  <span class="line first"></span>
  <span class="text">Continuous Improvement</span>
  <span class="line second"></span>
</p>