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

概述是否可以创建一个响应箭头,如图像中适应高度(也就是左列第二段被删除)只有css？ 我尝试了边框,旋转和倾斜填充和框阴影.但是无法实现图像中看到的布局. 我的问题是“元素”的可变高度. 这是实现的html代码： <div class="container"> <div class="row"> <article class="col-container"> <div clas

是否可以创建一个响应箭头,如图像中适应高度(也就是左列第二段被删除)只有CSS？
我尝试了边框,旋转和倾斜填充和框阴影.但是无法实现图像中看到的布局.
我的问题是“元素”的可变高度.

这是实现的HTML代码：

<div >  <div >    <article >      <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>      </div>      <div >        <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实现.

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

.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,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 >  <div >    <article >      <div >        <p>          Lorem ipsum dolor sit amet,eu mattis metus porttitor pharetra.        </p>      </div>      <div >        <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,a pellentesque erat neque eu purus.        </p>      </div>    </article>  </div></div>

> clip-path maker – Clippy
> CanIUse Support
> MDN Documentation

总结

以上是内存溢出为你收集整理的html – 创建适应元素高度的响应箭头全部内容，希望文章能够帮你解决html – 创建适应元素高度的响应箭头所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。