Text wrapped in polygon shape

Question

Created a polygon shape using CSS. But, The inner content of the polygon layout does not follow the polygon shape. It is hidden by the shape clipping.

Need to wrap the text in the polygon.

.flex {
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
}
.polygon1,
.polygon2 {
  float: left;
  width: 250px;
  height: 250px;
  background: #1e90ff;
  -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  text-align: center;
}
.polygon1 {
  padding: 10px;
}
.polygon2 {
  padding: 40px;
}

<div class="polygon1">
  <div class="flex">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software.
  </div>
</div>
<div class="polygon2">
  <div class="flex">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software.
  </div>
</div>

Tried:

• Added padding to the polygon. But, Padding measurement is depends on polygon dimensions. So, Not found exact measurement.

Screenshot:

Codepen: Goto Edit CodePen

Answer 1

WARNING : The shape-outside property should not be used in live projects¹. This answer is here just to show how the desired output can be achieved with this property.

The shape you refered to can be achieved with the shape-outside property. You can make two shapes that follow your clip-path shape. They will wrap the text inside the polygon. Here is an example:

div {
  width: 250px; height: 250px;
  background: #1e90ff;
  -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  text-align: justify;
  overflow: hidden;
}
span:after,span:before {
  content: '';
  width: 50%; height: 100%;
  -webkit-shape-margin: 10px;
  shape-margin: 10px;
}
span:before {
  float: left;
  -webkit-shape-outside: polygon(100% 0, 20% 20%, 0% 60%, 50% 100%, 0 100%, 0% 0%);
  shape-outside: polygon(100% 0, 20% 20%, 0% 60%, 50% 100%, 0 100%, 0% 0%);
}
span:after {
  float: right;
  -webkit-shape-outside: polygon(0 0, 80% 20%, 100% 60%, 50% 100%, 100% 100%, 100% 0%);
  shape-outside: polygon(0 0, 80% 20%, 100% 60%, 50% 100%, 100% 100%, 100% 0%);
}

<div>
  <span></span>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software.
</div>

For browser support of the shape-outside property, you can check canIuse.

¹_{The CSS Shapes Module Level 1 actualy (feb 2016) has the status of "Candidate Recommendation". As this means it is a work in progress, it may change at any moment and therefore should not be used other than for testing.}