Show text outside the div with clip-path

Question

We are using the code from the below link.

https://codepen.io/s-gupta/pen/jOMGbMX

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;
}
.zone:nth-child(1){
   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;
  width: 25%;
  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){ 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;
  width: 50%;
  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%;
  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){
  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;
  width: 100%;
  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 {
  background-color: rgba(255,255,255,0.3);
  color: white;
}

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

Issue: The long text hides outside the div with style -webkit-clip-path.

How can we show the text even outside the triangle?

Any help is highly appreciated :)

Thanks in advance.

Some code snippet but please refer to the link for complete code.

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

    .zone:nth-child(1){
   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;
  width: 25%;
  clip-path:url("#part1");
  clip-path:polygon(50% 0%,100% 100%, 0% 100%);
  -webkit-clip-path:polygon(50% 0%,100% 100%, 0% 100%);
   
}

Answer 1

Move the background part to pseudo elements:

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>

Answer 2

Unfortunately, you can't.

The first thing it comes to my mind is to use a wrapper and to put inside it two different divs, one for the text and one for the shape. After that, play with the positioning thanks to margins, negative padding, left, top, absolute/relative and so on

Answer 3

You need to have the text inside of a different element. You could wrap the text in a span and then have another empty span after it (but still within zone). Apply the background and clip to the empty span.

You'd need to share more code to get a more specific response.