Javascript 不太像CSS的六边形边框

基本上，我正在尝试用CSS获得这个布局。我有一些工作模式，但我发现很难得到文本后面的白色框，这是响应，并适用于所有屏幕大小

.info容器{ 利润上限：-50px； 宽度：100%； 边框底部：100px实心fff； 右边框：100px实心透明； } .info容器h2{ 位置：绝对位置； 左：0； 顶部：10px； } /*.pl-0是提供左填充的引导类：0*/ 见见我们的团队 Donec ultrices非莱克托斯身份显贵。这是一个很好的例子。绿僵菌。普雷森特·维韦拉，

像这样试试

HTML

---

我在下面使用剪辑路径为您制作了一个示例。我个人会考虑使用svg，因为浏览器支持，尽管我还看不出多边形有什么问题。看见 如果您有任何问题，请欣赏并告诉我：我还加入了一些其他css技巧，这些技巧我在过去几年中使用过很多次

身体{ 保证金：0； 填充：0； 框大小：边框框； } .英雄组{ 宽度：100%； 高度：100vh； 最小高度：500px； 背景图像：urlhttp://placeimg.com/1000/480/any; 背景重复：无重复； 背景位置：中心； 背景尺寸：封面； 位置：相对位置； } .形状截面{ 宽度：100%-5%； 最大宽度：500px； 高度：40vh； 最小高度：250px； 背景色：白色； 位置：绝对位置； 底部：0； 左：0； 剪辑路径：polygon77%5%，100%31%，82%100%，0110%，0； 显示器：flex； 证明内容：中心； 对齐项目：居中； 弯曲方向：立柱； } .头衔{ 右边距：自动； 最大宽度：70%； 左边距：24px； } .info{ 右边距：自动； 最大宽度：70%； 左边距：24px； } .cta按钮{ 背景色：FF5733； 边界半径：6px； 边框：1px实心900c3f； 颜色：白色； 右边距：自动； 左边距：24px； 过渡：all.2s； 盒影：0 1px 3px rgba0,0,0.2； 字体大小：16px； 填充：8px 30px； } .cta按钮：悬停{ 盒影：0 3px 6px rgba0,0,0.3； 转换：translateY-2px； 光标：指针； } 结交朋友

。你是说你是谁？我是个书呆子

做事

---

以下是一个使用多个背景的想法：

身体{ 保证金：0； } .英雄组{ 高度：100vh； 最小高度：500px； 背景图像：urlhttp://placeimg.com/1000/480/any; 背景位置：中心； 背景尺寸：封面； 位置：相对位置； } .形状截面{ 宽度：100%-5%； 最大宽度：500px； 高度：40vh； 最小高度：250px； 位置：绝对位置； 底部：0； 左：0； 显示器：flex； 证明内容：中心； 对齐项目：居中； 弯曲方向：立柱； 背景： 线性渐变至右下角，白色49.5%，透明50%右下角/40px 60%， 线性渐变至右上角，白色49.5%，透明50%顶部20px右侧0/40px calc40%-20px， 线性渐变至右上角，白色49.5%，透明50%左上角/calc100%-40px 20px， 线性梯度白色，左下角为白色/calc100%-40px calc100%-20px； 背景重复：无重复； } .头衔{ 右边距：自动； 最大宽度：70%； 左边距：24px； } .info{ 右边距：自动； 最大宽度：70%； 左边距：24px； } .cta按钮{ 背景色：FF5733； 边界半径：6px； 边框：1px实心900c3f； 颜色：白色； 右边距：自动； 左边距：24px； 过渡：all.2s； 盒影：0 1px 3px rgba0,0,0,0.2； 字体大小：16px； 填充：8px 30px； } .cta按钮：悬停{ 盒影：0 3px 6px rgba0,0,0,0.3； 转换：translateY-2px； 光标：指针； } 结交朋友

。你是说你是谁？我是个书呆子

做事

---

跳转到类似的站点并创建形状。可能会得到你想要的。但不确定ie是否支持剪辑路径。您必须使用媒体查询使其响应。目前，clip path和any@JonP是的，我会首先使用svg。这很好，但是EDGE不支持clip path，这是一个问题，因为它是我们必须支持的浏览器之一。这可以通过边界实现吗？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-mg-12 skew_bg">
            <img src="http://placeimg.com/1000/480/any" />
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-8 pl-0">
            <div class="info-container">
                <h2>Meet our team</h2>
            </div>
            <p>
 Donec ultrices non lectus id dignissim. Pellentesque luctus justo dolor, ut vulputate tortor porttitor vel. Phasellus eget sollicitudin est. Praesent viverra, 
 </p>
        </div>
    </div>
</div>

info-container {
  margin-top: -50px;
  width: 100%;
  border-bottom: 100px solid #fff;
  border-right: 100px solid transparent;
}
.skew_bg{
position: relative;
overflow: hidden;
}
.skew_bg:before{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 50%;
background: #FFF;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(30deg, 0deg);
}
/* .pl-0 is bootstrap class that gives padding-left: 0; */