不太像CSS的六角形边框

Question

基本上，我正在尝试在CSS中获得此布局。我在某种程度上处于模态工作状态，但发现很难在响应后且适用于所有屏幕尺寸的文本后面放置白框。

.info-container {
  margin-top: -50px;
  width: 100%;
  border-bottom: 100px solid #fff;
  border-right: 100px solid transparent;
}
.info-container h2 {
  position: absolute;
  left: 0;
  top: 10px;
}
/* .pl-0 is bootstrap class that gives padding-left: 0; */

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

Answer 1

尝试这样。

HTML

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

CSS

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; */