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

是否可以仅使用 css 创建一个像图像中那样适应高度的响应箭头(又名左列第二段被删除)？
我尝试使用边框、旋转和倾斜的填充和框阴影。但无法实现如图所示的布局。
我的问题是“元素”的可变高度。

这是实现的html代码:

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

这是css:

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

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

.col-left {
  background-color: #fff;
}

.col-right {
  background-color: #019CDC;
}

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

最佳答案

clip-path 解决方案

这可以通过 CSS 属性 clip-path 实现。

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

.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

关于html - 创建适应元素高度的响应箭头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39898996/