创建适应元素高度的响应箭头

Question

是否可以创建一个响应式箭头，就像在图像中一样，仅适用于高度（也就是左侧列第二段被删除）？ 我尝试了边框，旋转和倾斜填充和框阴影。但是无法实现图像中所示的布局。 我的问题是＆＃34;元素的变量高度＆＃34;。

这是实施的html代码：

var timeout;
timeout = setTimeout((function(s_text){
    alert(s_text);
})('Hello'), 1000);

这就是css：

<div class="container">
  <div class="row">
    <article class="col-container">
      <div class="col-md-6 col-xs-6 col-left">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
          porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
        <p>Sed volutpat fringilla tempus. Quisque sit amet elit non ante facilisis accumsan. Phasellus varius facilisis eleifend. Sed iaculis arcu magna, ut ullamcorper diam venenatis eget. Pellentesque iaculis risus vitae augue ultricies accumsan. Etiam
          vulputate, ante a blandit luctus, sapien augue scelerisque ligula, id rhoncus massa arcu eget eros. Ut et nisl eu purus ullamcorper suscipit. Pellentesque in suscipit ipsum, quis auctor augue. Vestibulum non aliquet ipsum, sed luctus nibh. Praesent
          vulputate efficitur augue, eu mattis metus porttitor pharetra.
        </p>
      </div>
      <div class="col-md-6 col-xs-6 col-right">
        <p>
          In placerat nulla non mauris dictum ullamcorper. Integer elementum ipsum sit amet lacus imperdiet mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar, mi ac laoreet consectetur, lorem mi congue
          augue, a pellentesque erat neque eu purus.
        </p>
      </div>
    </article>
  </div>
</div>

我在这里玩了一个jsfiddle：https://jsfiddle.net/ae6L4or5/

Answer 1

clip-path解决方案

使用CSS属性clip-path可以实现这一点。

这仍然是相当不受支持的，因此应该更多地用作未来的建议

.col-container {
  overflow: auto;
  box-sizing: border-box;
  background: skyblue;
}
.col-container .col-left {
  background: white;
  -webkit-clip-path: polygon(80% 0, 95% 50%, 80% 100%, 0 100%, 0 0);
  clip-path: polygon(80% 0, 95% 50%, 80% 100%, 0 100%, 0 0);
  width: 60%;
  float: left;
  padding: 12px;
  padding-right: 12%;
  box-sizing: border-box;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <article class="col-container">
      <div class="col-md-8 col-xs-8 col-left">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
          porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
        <p>Sed volutpat fringilla tempus. Quisque sit amet elit non ante facilisis accumsan. Phasellus varius facilisis eleifend. Sed iaculis arcu magna, ut ullamcorper diam venenatis eget. Pellentesque iaculis risus vitae augue ultricies accumsan. Etiam
          vulputate, ante a blandit luctus, sapien augue scelerisque ligula, id rhoncus massa arcu eget eros. Ut et nisl eu purus ullamcorper suscipit. Pellentesque in suscipit ipsum, quis auctor augue. Vestibulum non aliquet ipsum, sed luctus nibh. Praesent
          vulputate efficitur augue, eu mattis metus porttitor pharetra.
        </p>
      </div>
      <div class="col-md-4 col-xs-4 col-right">
        <p>
          In placerat nulla non mauris dictum ullamcorper. Integer elementum ipsum sit amet lacus imperdiet mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar, mi ac laoreet consectetur, lorem mi congue
          augue, a pellentesque erat neque eu purus.
        </p>
      </div>
    </article>
  </div>
</div>

• clip-path maker - Clippy
• CanIUse Support
• MDN Documentation

Answer 2

SVG解决方案：

您可以使用SVG实现此目的：

MARKUP：

首先让我们使用<path>标签创建我们的SVG形状。请务必使用值fill添加属性currentColor，这将在下面再说几步。

<path fill="currentColor" d="M0 0 L0 100 L35 50 Z"></path>

  

更多信息：<path>代码here。

创建我们的“三角形”形状后，我们会将其包装在<symbol>标签中，并带有一个id，以便我们可以像SVG图标一样多次使用它， spritesheet并使用<use>标记。

<svg id="spriteSheet">
<defs>
  <symbol id="triangleSeparator" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path fill="currentColor" d="M0 0 L0 100 L35 50 Z"></path>
  </symbol>
</defs>
</svg>

  

<use>元素可让您重复使用现有元素，为您提供支持   与图形中的复制粘贴功能类似的功能   编辑器。

     

更多信息： here 。

好的，现在我们已经准备好使用我们的SVG （双关语）。让我们将它包装在<svg>标签中，并为其添加一个类，以便以后设置样式。

<svg class="separator__triangle">
   <use xlink:href="#triangleSeparator"></use>
</svg>

接下来，将上面的<svg>标记包含在另一个元素中，以便我们按照自己的意愿定位它。

<div class="separator__container">
    <svg class="separator__triangle">
      <use xlink:href="#triangleSeparator"></use>
    </svg>
</div>

STYLING：

还记得我们在currentColor属性<path>中定义的值fill吗？

是时候使用它了，currentColor变量将跟随级联并从我们在以下类中定义的color属性中获取值：

.separator__triangle {
  width: 100px; /* You can change the width if you want it to be bigger or smaller*/
  height: 100% /* Used to fill the whole container */;
  color: white; /* This is the color of the triangle shape */
}

定位我们的容器并隐藏我们的spritesheet（这是防止它呈现空白空间所需的）：

#spriteSheet {
  display: none;
}

.separator__container {
  pointer-events: none; /* We don't want it to have any pointer events do we?*/
  position: absolute; /* Positioning */
  top: 0;
  left: 0;
  height: 100%; /* Cover whole height of the container*/
}

最后，我们准备好了！

CODE SNIPPET：

.container {
  display: flex;
}
.col {
  padding: 3em;
}
.col--left {
  background-color: #fff;
}
.col--right {
  background-color: #019CDC;
}
.col--with-separator {
  position: relative;
}
#spriteSheet {
  display: none;
}
.separator__container {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.separator__triangle {
  width: 100px;
  height: 100%;
  color: white;
}

<main>
  <article class="container">
    <section class="col col--left">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
        porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
      <p>Sed volutpat fringilla tempus. Quisque sit amet elit non ante facilisis accumsan. Phasellus varius facilisis eleifend. Sed iaculis arcu magna, ut ullamcorper diam venenatis eget. Pellentesque iaculis risus vitae augue ultricies accumsan. Etiam vulputate,
        ante a blandit luctus, sapien augue scelerisque ligula, id rhoncus massa arcu eget eros. Ut et nisl eu purus ullamcorper suscipit. Pellentesque in suscipit ipsum, quis auctor augue. Vestibulum non aliquet ipsum, sed luctus nibh. Praesent vulputate
        efficitur augue, eu mattis metus porttitor pharetra.
      </p>
    </section>
    <section class="col col--right col--with-separator">
      <div class="separator__container">
        <svg class="separator__triangle">
          <use xlink:href="#triangleSeparator"></use>
        </svg>
      </div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
        porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
    </section>
  </article>
</main>

<svg id="spriteSheet">
  <defs>
    <symbol id="triangleSeparator" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path fill="currentColor" d="M0 0 L0 100 L35 50 Z"></path>
    </symbol>
  </defs>
</svg>

请记住，只要您想使用箭头，您只需要将以下内容添加到容器中：

<div class="separator__container">
    <svg class="separator__triangle">
       <use xlink:href="#triangleSeparator"></use>
    </svg>
</div>

  

注意：您的容器必须有position: relative;作为其CSS属性之一，因为我们的箭头使用absolute值定位。

PLAYGROUND：

让我们添加一个修改器来反转箭头并在左栏上使用它！

.container {
  display: flex;
}
.col {
  padding: 3em;
}
.col--left {
  background-color: #fff;
}
.col--right {
  background-color: #019CDC;
}
.col--with-separator {
  position: relative;
}
#spriteSheet {
  display: none;
}
.separator__container {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.separator__triangle {
  width: 100px;
  height: 100%;
  color: white;
}
.separator__container--inverted {
  left: calc(100% - 100px);
}
.separator__container--inverted .separator__triangle {
  color: #019CDC;
  transform: rotateZ(180deg);
}

<main>
  <article class="container">
    <section class="col col--left col--with-separator">
      <div class="separator__container separator__container--inverted">
        <svg class="separator__triangle separator__triangle--inverted">
          <use xlink:href="#triangleSeparator"></use>
        </svg>
      </div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
        porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
      <p>Sed volutpat fringilla tempus. Quisque sit amet elit non ante facilisis accumsan. Phasellus varius facilisis eleifend. Sed iaculis arcu magna, ut ullamcorper diam venenatis eget. Pellentesque iaculis risus vitae augue ultricies accumsan. Etiam vulputate,
        ante a blandit luctus, sapien augue scelerisque ligula, id rhoncus massa arcu eget eros. Ut et nisl eu purus ullamcorper suscipit. Pellentesque in suscipit ipsum, quis auctor augue. Vestibulum non aliquet ipsum, sed luctus nibh. Praesent vulputate
        efficitur augue, eu mattis metus porttitor pharetra.
      </p>
    </section>
    <section class="col col--right">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
        porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
    </section>
  </article>
</main>

<svg id="spriteSheet">
  <defs>
    <symbol id="triangleSeparator" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path fill="currentColor" d="M0 0 L0 100 L35 50 Z"></path>
    </symbol>
  </defs>
</svg>

<强> JSFIDDLE

这是Stewartside解决方案的替代方案，目前缺少浏览器支持 。

编辑：

在演示中使用了相同高度列的问题， Flexbox ，这个答案的范围不包含进一步的解释。

但是，这是另一个 post ，您可以在更多信息部分中找到有关Flexbox的有用资源。

Answer 3

您可以使用:before和:after伪元素以及一点点CSS3转换来实现此目标。

注意： 此技术取决于最大列的内容。您可以更改width个伪元素和一点旋转，以使其适合您的需要。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.col-container {
  overflow: hidden;
  position: relative;
  background: #fff;
}

.col-left,
.col-right {
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}

.col-left {
  z-index: 10;
}

.col-right {
  background-color: #019CDC;
  padding-left: 50px;
}

.col-container:before,
.col-container:after {
  transform: rotate(3deg);
  transform-origin: 0 0;
  position: absolute;
  margin-left: -15px;
  background: #fff;
  margin-top: -3px;
  height: 9999px;
  content: '';
  width: 50px;
  z-index: 1;
  bottom: 0;
  left: 50%;
  top: 50%;
}
.col-container:before {
  transform-origin: 0 100%;
  transform: rotate(-3deg);
  margin-bottom: -3px;
  bottom: 50%;
  top: auto;
}

<div class="container">
  <div class="row">
    <article class="col-container">
      <div class="col-md-6 col-xs-6 col-left">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
          porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
        <p>Sed volutpat fringilla tempus. Quisque sit amet elit non ante facilisis accumsan. Phasellus varius facilisis eleifend. Sed iaculis arcu magna, ut ullamcorper diam venenatis eget. Pellentesque iaculis risus vitae augue ultricies accumsan. Etiam
          vulputate, ante a blandit luctus, sapien augue scelerisque ligula, id rhoncus massa arcu eget eros. Ut et nisl eu purus ullamcorper suscipit. Pellentesque in suscipit ipsum, quis auctor augue. Vestibulum non aliquet ipsum, sed luctus nibh. Praesent
          vulputate efficitur augue, eu mattis metus porttitor pharetra.
        </p>
      </div>
      <div class="col-md-6 col-xs-6 col-right">
        <p>
          In placerat nulla non mauris dictum ullamcorper. Integer elementum ipsum sit amet lacus imperdiet mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar, mi ac laoreet consectetur, lorem mi congue
          augue, a pellentesque erat neque eu purus.
        </p>
      </div>
    </article>
  </div>
</div>