Показать текст за пределами div с clip-path

body {
  background: #333;
  font-family: "SF UI Text", "Avenir", "Helvetica", arial, san-serif;
  color: #888;
}

.ccdLogo {
  background: url("https://crystalcleardesigns.co.uk/img/CCDlogo.svg") no-repeat center / 100%;
  height: 100px;
  width: 150px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.ccdLogo:before {
  content: "Click to view more pens";
  color: transparent;
  font-size: 14px;
  position: absolute;
  top: -2px;
  left: 5px;
  transition: 0.4s;
}

.ccdLogo:hover:before {
  color: #2B7B9B;
  transform: translateY(-10px);
}

.wrapper {
  margin: 5vh auto 0;
}

.pyramid {
  float: left;
  shape-outside: polygon(310px 0px, 130px 405px, 558px 405px);
  padding-right: 60px;
  width: 500px;
  height: 500px;
}

.zone {
  padding: 40px 0;
  margin: 0 auto;
  text-align: center;
  color: black;
  background-blend-mode: darken;
  transition: 0.5s;
  position:relative;
  z-index:0;
}
.zone::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
}

.zone:nth-child(1) {
  width: 25%;
}
.zone:nth-child(1)::before {
  background: rgba(202, 197, 95, 0.7) url("https://pixabay.com/static/uploads/photo/2016/01/05/13/34/laugenbrotchen-1122509_960_720.jpg") center / cover;
  clip-path: url("#part1");
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.zone:nth-child(2) {
  width: 50%;
}
.zone:nth-child(2)::before {
  background: rgba(202, 197, 95, 0.7) url("https://pixabay.com/static/uploads/photo/2016/01/27/14/22/orange-1164504_960_720.jpg") center / cover;
  clip-path: url("#part2");
  clip-path: polygon(25% 0%, 75% 0, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(25% 0%, 75% 0, 100% 100%, 0% 100%);

}

.zone:nth-child(3) {
  width: 75%;
}
.zone:nth-child(3)::before {
  background: rgba(202, 197, 95, 0.7) url("https://pixabay.com/static/uploads/photo/2015/11/21/18/07/apple-juice-1055331_960_720.jpg") center /cover;
  clip-path: url("#part3");
  clip-path: polygon(16.5% 0, 83% 0, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(16.5% 0, 83% 0, 100% 100%, 0% 100%);

}

.zone:nth-child(4) {
  width: 100%;
}
.zone:nth-child(4)::before {
  background: rgba(202, 197, 95, 0.7) url("https://pixabay.com/static/uploads/photo/2016/01/17/04/29/rain-drops-1144448_960_720.jpg") center / cover;
  clip-path: url("#part4");
  clip-path: polygon(12.5% 0, 0%, 87.5% 0, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(12.5% 0, 87.5% 0, 100% 100%, 0% 100%);

}

.zone:hover {
  color: white;
}
.zone:hover::before {
  background-color: rgba(255, 255, 255, 0.3);
}

<div class = "wrapper">
  <div class = "pyramid">
    <div class = "zone">Triangle more text..</div>
    <div class = "zone">Trapezoid</div>
    <div class = "zone">Trapezoid</div>
    <div class = "zone">Trapezoid</div>
  </div>
  <h1 class = "text">Oh, the Places You'll Go!</div>
<p class = "text">Congratulations! <br> Today is your day.<br> You're off to Great Places!<br> You're off and away!<br>
  <br> You have brains in your head.<br> You have feet in your shoes.<br> You can steer yourself <br> any direction you choose.<br> You're on your own. And you know what you know.<br> And YOU are the guy who'll decide where to go.<br>
  <br> You'll look up and down streets. Look 'em over with care.<br> About some you will say, "I don't choose to go there."<br>

  </div>

  <svg width = "0" height = "0">
    <defs>
   <clipPath id = "part1" clipPathUnits= "objectBoundingBox">
     <polygon points= "0.5 0, 1 1, 0 1"/>
   </clipPath>
   <clipPath id = "part2" clipPathUnits= "objectBoundingBox">
     <polygon points= "0.25 0,0.75 0, 1 1, 0 1"/>
   </clipPath>
   <clipPath id = "part3" clipPathUnits= "objectBoundingBox">
     <polygon points= "0.165 0,0.83 0, 1 1, 0 1"/>
   </clipPath>
   <clipPath id = "part4" clipPathUnits= "objectBoundingBox">
     <polygon points= "0.125 0,0.875 0, 1 1, 0 1"/>
   </clipPath>
     </defs>
</svg>