在div外部显示带有剪切路径的文本 [英] Show text outside the div with clip-path

查看：35
本文介绍了在div外部显示带有剪切路径的文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我们正在使用以下链接中的代码.

我们如何甚至在三角形之外显示文字?

我们非常感谢您的帮助:)

谢谢.

某些代码段，但请参考链接以获取完整代码.

 < div class ="pyramid">< div class ="zone">更多三角形.< div class ="zone">梯形</div>< div class ="zone">梯形</div>< div class ="zone">梯形</div> 

  .zone:nth-​​child(1){背景:rgba(202,197,95,0.7)url(" https://pixabay.com/static/uploads/photo/2016/01/05/13/34/laugenbrotchen-1122509_960_720.jpg")中心/封面；宽度:25％;clip-path:url(#part1");clip-path:polygon(50％0％，100％100％，0％100％);-webkit-clip-path:polygon(50％0％，100％100％，0％100％);}

解决方案

将背景部分移至伪元素:

  body {背景:#333；字体系列:"SF UI文本"，"Avenir"，"Helvetica"，arial，san-serif；颜色:#888;}.ccdLogo {背景:url("https://crystalcleardesigns.co.uk/img/CCDlogo.svg")无重复中心/100％；高度:100px；宽度:150像素；位置:绝对；底部:0;正确:0；}.ccdLogo:之前{内容:点击查看更多笔"；颜色:透明；font-size:14px;位置:绝对；顶部:-2px；左:5px；过渡:0.4秒;}.ccdLogo:hover:before {颜色:#2B7B9B；转换:translateY(-10px);}.wrapper {保证金:5vh自动0;}.pyramid {向左飘浮;形状外:多边形(310像素0像素，130像素405像素，558像素405像素);padding-right:60像素；宽度:500像素；高度:500像素；}.zone {填充:40px 0;保证金:0自动;文本对齐:居中；颜色:黑色;背景混合模式:变暗；过渡:0.5秒;位置:相对；z-index:0;}.zone :: before {内容:"";位置:绝对；顶:0;左:0;对:0;底部:0;z索引:-1；}.zone:nth-​​child(1){宽度:25％;}.zone:nth-​​child(1):: before {背景:rgba(202、197、95、0.7)url("https://pixabay.com/static/uploads/photo/2016/01/05/13/34/laugenbrotchen-1122509_960_720.jpg")中心/封面；剪切路径:url(#part1");剪切路径:多边形(50％0％，100％100％，0％100％);-webkit-clip-path:多边形(50％0％，100％100％，0％100％);}.zone:nth-​​child(2){宽度:50％;}.zone:nth-​​child(2):: before {背景:rgba(202，197，95，0.7)url("https://pixabay.com/static/uploads/photo/2016/01/27/14/22/orange-1164504_960_720.jpg")中心/封面；剪切路径:url(#part2");剪切路径:多边形(25％0％，75％0、100％100％，0％100％);-webkit-clip-path:多边形(25％0％，75％0，100％100％，0％100％);}.zone:nth-​​child(3){宽度:75％;}.zone:nth-​​child(3):: before {背景:rgba(202、197、95、0.7)url("https://pixabay.com/static/uploads/photo/2015/11/21/18/07/apple-juice-1055331_960_720.jpg")中心/覆盖;剪切路径:url(#part3");剪切路径:多边形(16.5％0，83％0，100％100％，0％100％);-webkit-clip-path:多边形(16.5％0，83％0，100％100％，0％100％);}.zone:nth-​​child(4){宽度:100％;}.zone:nth-​​child(4):: before {背景:rgba(202、197、95、0.7)url("https://pixabay.com/static/uploads/photo/2016/01/17/04/29/rain-drops-1144448_960_720.jpg")中心/覆盖;剪切路径:url(#part4");剪切路径:多边形(12.5％0，0％，87.5％0，100％100％，0％100％);-webkit-clip-path:多边形(12.5％0，87.5％0，100％100％，0％100％);}.zone:hover {白颜色;}.zone:hover :: before {background-color:rgba(255，255，255，0.3);}  

 < div class ="wrapper">< div class ="pyramid">< div class ="zone">更多三角形的文字..</div>< div class ="zone">梯形</div>< div class ="zone">梯形</div>< div class ="zone">梯形</div></div>< h1 class ="text">哦，您要去的地方！</div>< p class ="text">恭喜！< br>今天是你的一天.您要去很棒的地方！< br>您无处不在！< br>< br>您的大脑中有大脑.您的脚上有鞋.< br>您可以引导自己< br>您选择的任何方向.你一个人.而且您知道您所知道的.而您是决定去哪儿的人.< br>< br>您会在街道上四处张望.小心翼翼.< br>关于某些人，您会说:我不选择去那里."< br></div>< svg width ="0" height ="0">< defs>< clipPath id ="part1" clipPathUnits =" objectBoundingBox><多边形点="0.5 0，1 1，0 1"/></clipPath>< clipPath id ="part2" clipPathUnits =" objectBoundingBox><多边形点="0.25 0,0.75 0，1 1，0 1"/></clipPath>< clipPath id ="part3" clipPathUnits =" objectBoundingBox><多边形点="0.165 0,0.83 0，1 1，0 1"/></clipPath>< clipPath id ="part4" clipPathUnits =" objectBoundingBox><多边形点＝"0.125 0,0.875 0，1 1，0 1"/></clipPath></defs></svg>

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

解决方案

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>

这篇关于在div外部显示带有剪切路径的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆