Мобильная версия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/phot ... 60_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/phot ... 60_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/phot ... 60_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/phot ... 60_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;
}< /code>
Triangle more text..
Trapezoid
Trapezoid
Trapezoid
Oh, the Places You'll Go!
Congratulations!
Today is your day.
You're off to Great Places!
You're off and away!
You have brains in your head.
You have feet in your shoes.
You can steer yourself
any direction you choose.
You're on your own. And you know what you know.
And YOU are the guy who'll decide where to go.
You'll look up and down streets. Look 'em over with care.
About some you will say, "I don't choose to go there."
< /code>
< /div>
< /div>
< /p>
Проблема: длинный текст скрывается за пределами Div со стилем -webkit -clip -path.
Как мы можем показать текст даже за пределами треугольника?
Любая помощь высоко ценится
p>
какой -то фрагмент кода, но, пожалуйста, обратитесь к ссылке для полного кода. < /p>
Triangle more text..
Trapezoid
Trapezoid
Trapezoid
< /code>
.zone:nth-child(1){
background:rgba(202,197,95,0.7) url("https://pixabay.com/static/uploads/phot ... 60_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%);
}
Подробнее здесь: https://stackoverflow.com/questions/654 ... -clip-path
