<div class="box">
  <i></i> 
  Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Lorem ipsum Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. 
</div>
div.box {
  --s:450px; 

  height: var(--s);
  width:  var(--s); 
  clip-path: polygon(0 50%,50% 100%,100% 50%,50% 0);
  background: #333;
  color:#fff;
  margin:30px auto 0;
  font-size:20px;
  text-align:justify;
}

.box i,
.box::before {
  content: '';
  float: left;
  height:100%;
  width: 50%;
  shape-outside: conic-gradient(from 45deg at 0 50%,transparent 90deg,#fff);
}

.box i {
  float: right;
  shape-outside: conic-gradient(from 225deg at 100% 50%,transparent 90deg,#fff);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.