Not quite hexagon looking border with CSS

Question

Basically I'm trying to get this layout in CSS. I've somewhat working modal but I'm finding it hard to get the white box behind the text that is responsive and works for all screen sizes.

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

Jump onto a site like https://bennettfeely.com/clippy/ and create the shape. Could possibly get what you want done. Not sure of the ie support for clip-path though. You will have to use media queries to make it responsive. — Spangle, Oct 18 '19 at 05:13
Currently `clip-path` and any [Microsoft browser are not friends](https://caniuse.com/#feat=css-clip-path) — Jon P, Oct 18 '19 at 05:30

Spangle · Accepted Answer · 2022-03-30T04:20:53.060

I have made you an example below using clip path. I personally would look to use an svg, due to browser support. See https://caniuse.com/#search=clip%20path Enjoy and let me know if you have any questions :) I also threw in a couple other css tricks which I have used many times over the years.

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>

This is nice however EDGE doesn't support clip path which is an issue as it's one of the browsers we must support. Can this be done with borders? — shutupchigo, Oct 18 '19 at 06:31

score 1 · Answer 2 · answered Oct 18 '19 at 09:45

Here is an idea using multiple background:

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>

To better understand the trick use different colors to see the puzzle:

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>

score 0 · Answer 3 · answered Oct 18 '19 at 05:16

try like this.

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

Not quite hexagon looking border with CSS

3 Answers3