<main>
  <div class="shape-placeholder"></div>
  <h1>V-Shapes</h1>
  <p>For me, one of the most incredible aspects of modern-day CSS is that I can create a shape from the alpha channel of a partially transparent image with no need to draw a polygon path. I only need to create an image, and then a browser will take care of the rest.</p>
  <p>I think this is one of the most exciting additions to CSS and it makes developing art direction for the web more straightforward, especially if you work with a content management system and dynamically generated content.</p>
  <p>For me, one of the most incredible aspects of modern-day CSS is that I can create a shape from the alpha channel of a partially transparent image with no need to draw a polygon path. I only need to create an image, and then a browser will take care of the rest.</p>
  <p>I think this is one of the most exciting additions to CSS and it makes developing art direction for the web more straightforward, especially if you work with a content management system and dynamically generated content.</p>
  <p>For me, one of the most incredible aspects of modern-day CSS is that I can create a shape from the alpha channel of a partially transparent image with no need to draw a polygon path. I only need to create an image, and then a browser will take care of the rest.</p>
  <p>I think this is one of the most exciting additions to CSS and it makes developing art direction for the web more straightforward, especially if you work with a content management system and dynamically generated content.</p>
  <p>For me, one of the most incredible aspects of modern-day CSS is that I can create a shape from the alpha channel of a partially transparent image with no need to draw a polygon path. I only need to create an image, and then a browser will take care of the rest.</p>
  <p>I think this is one of the most exciting additions to CSS and it makes developing art direction for the web more straightforward, especially if you work with a content management system and dynamically generated content.</p>
</main>
main {
  max-width: 70vw;
  margin: 10px auto;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 1px 1px 1px rgba(#eee,.5);
  
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

.shape-placeholder {
  width: 100%;
  
  &::before,
  &::after {
    content: '';
    width: 35vw;
    height: 100vh;
  }
  
  &::before {
    float: left;
    shape-outside: polygon(0 0, 0% 100%, 70% 100%);
  }
  
  &::after {
    float: right;
    shape-outside: polygon(100% 0, 30% 100%, 100% 100%);
  }
}

h1 {
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.