Не совсем шестиугольник с 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

Ниже приведен пример использования пути клипа. Я лично хотел бы использовать svg из-за поддержки браузера (хотя пока не вижу проблемы с полигоном). См. https://caniuse.com/#search=clip%20path Наслаждайтесь и дайте мне знать, если у вас есть какие-либо вопросы :) Я также добавил пару других трюков CSS, которые я использовал много раз за эти годы.

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hero-section {
    width: 100%;
    height: 100vh;
    min-height: 500px;
    background-image: url(http://placeimg.com/1000/480/any);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.shape-section {
    width: calc(100% - 5%);
    max-width: 500px;
    height: 40vh;
    min-height: 250px;
    background-color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    clip-path: polygon(77% 5%, 100% 31%, 82% 100%, 0 100%, 0 0);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.title {
    margin-right: auto;
    max-width: 70%;
    margin-left: 24px;
}

.info {
    margin-right: auto;
    max-width: 70%;
    margin-left: 24px;
}

.cta-button {
    background-color: #FF5733;
    border-radius: 6px;
    border: 1px solid #900c3f;
    color: white;
    margin-right: auto;
    margin-left: 24px;
    transition: all .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    font-size: 16px;
    padding: 8px 30px;
}

.cta-button:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    transform: translateY(-2px);
    cursor: pointer;
}

<div class="hero-section">
    <div class="shape-section">
        <h1 class="title">Meet out People</h1>
        <p class="info">Der dee herpderpsmer merp re herp derp derps. Ter mer merpus derp perp cerp le sherp? Ler se terp, mer nerpy.</p>
        <button class="cta-button">Do Stuff</button>
    </div>
</div>

Answer 2

Вот идея с использованием нескольких фонов:

body {
  margin: 0;
}

.hero-section {
  height: 100vh;
  min-height: 500px;
  background-image: url(http://placeimg.com/1000/480/any);
  background-position: center;
  background-size: cover;
  position: relative;
}

.shape-section {
  width: calc(100% - 5%);
  max-width: 500px;
  height: 40vh;
  min-height: 250px;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
  
  background: 
    linear-gradient(to bottom right,white 49.5%,transparent 50%) bottom right/40px 60%,
    linear-gradient(to top right,white 49.5%,transparent 50%) top 20px right 0/40px calc(40% - 20px),
    linear-gradient(to top right,white 49.5%,transparent 50%) top left /calc(100% - 40px) 20px,
    linear-gradient(white,white) bottom left/calc(100% - 40px) calc(100% - 20px);
  background-repeat:no-repeat;
}

.title {
  margin-right: auto;
  max-width: 70%;
  margin-left: 24px;
}

.info {
  margin-right: auto;
  max-width: 70%;
  margin-left: 24px;
}

.cta-button {
  background-color: #FF5733;
  border-radius: 6px;
  border: 1px solid #900c3f;
  color: white;
  margin-right: auto;
  margin-left: 24px;
  transition: all .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  padding: 8px 30px;
}

.cta-button:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
  cursor: pointer;
}

<div class="hero-section">
  <div class="shape-section">
    <h1 class="title">Meet out People</h1>
    <p class="info">Der dee herpderpsmer merp re herp derp derps. Ter mer merpus derp perp cerp le sherp? Ler se terp, mer nerpy.</p>
    <button class="cta-button">Do Stuff</button>
  </div>
</div>

Чтобы лучше понять трюк, используйте разные цвета, чтобы увидеть загадку:

body {
  margin: 0;
}

.hero-section {
  height: 100vh;
  min-height: 500px;
  background-image: url(http://placeimg.com/1000/480/any);
  background-position: center;
  background-size: cover;
  position: relative;
}

.shape-section {
  width: calc(100% - 5%);
  max-width: 500px;
  height: 40vh;
  min-height: 250px;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
  
  background: 
    linear-gradient(to bottom right,blue 49.5%,transparent 50%) bottom right/40px 60%,
    linear-gradient(to top right,green 49.5%,transparent 50%) top 20px right 0/40px calc(40% - 20px),
    linear-gradient(to top right,red 49.5%,transparent 50%) top left /calc(100% - 40px) 20px,
    linear-gradient(white,white) bottom left/calc(100% - 40px) calc(100% - 20px);
  background-repeat:no-repeat;
}

.title {
  margin-right: auto;
  max-width: 70%;
  margin-left: 24px;
}

.info {
  margin-right: auto;
  max-width: 70%;
  margin-left: 24px;
}

.cta-button {
  background-color: #FF5733;
  border-radius: 6px;
  border: 1px solid #900c3f;
  color: white;
  margin-right: auto;
  margin-left: 24px;
  transition: all .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  padding: 8px 30px;
}

.cta-button:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
  cursor: pointer;
}

<div class="hero-section">
  <div class="shape-section">
    <h1 class="title">Meet out People</h1>
    <p class="info">Der dee herpderpsmer merp re herp derp derps. Ter mer merpus derp perp cerp le sherp? Ler se terp, mer nerpy.</p>
    <button class="cta-button">Do Stuff</button>
  </div>
</div>

Answer 3

попробуй вот так.

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