Search code examples
htmlcss

Show text outside the div with clip-path

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.

enter image description here

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%);
   
}
Solution

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