Question

我想创建不同大小的标题，并在其侧面使用自适应不同类型的行：一个从左到右，另一个从右到左。

我该怎么做？

这是表示的CodePen。

<div class="container">
  <h1 class="title-stripes">Title 1</h1><br />
  <h1 class="title-stripes">This is a bigger title</h1><br />
  <h1 class="title-stripes">Small</h1>
</div>

条纹的背景图像内侧有一个三角形，一个从左到右，另一个从右到左。

使用解决方案

更新 CodePen

Answer 1

只需替换：

.title-stripes:before {
  background: url(http://i64.tinypic.com/2ugnc53.png);
  right: 100%;
}

使用：

.title-stripes:before {
  background: url(http://i64.tinypic.com/346nxu8.png);
  right: 100%;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
   transform: rotate(180deg);
}

Answer 2

我认为这取决于你的自适应意味着什么。听起来像SVG的理想工作。你应该能够创建一些SVG并根据你想要的效果操作它们

Answer 3

您需要更多标记。您需要在这些标头标签内设置<span>或其他内容，然后在范围中添加样式。这是我如何创建我的口音标题。它们具有响应性和灵活性的字体大小。

http://codepen.io/anon/pen/Eyvbwp

HTML：

<h2 class="accent-double text-center"><span>Hello World</span></h2>

CSS [LESS]：

.accent-double {
overflow: hidden;
text-align:center;
 span{
   display: inline-block;
   position: relative;
   &:before{
    right: 100%;
    margin-right: 0.5em;
    content: "";
    position: absolute;
    top: 50%;
    height: 3px;
    width: 9999px;
    display: block;
    margin-top: -2px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
   }
   &:after{
    left: 100%;
    margin-left: 0.5em;
    content: "";
    position: absolute;
    top: 50%;
    height: 3px;
    width: 9999px;
    display: block;
    margin-top: -2px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
  }
 }
}

标题与不同的自适应线

3 个答案: