0
Первоначально у меня были меньшие треугольники, но хотелось, чтобы они были больше на странице, поэтому я добавляю некоторые дополнения к треугольнику на переднем плане. Когда я это сделал, он отрезал часть моего треугольника, и я не могу понять, как добавить его обратно, не жертвуя размером. Я пробовал перегрузку и ширину, и они ничего не делают.Фиксирующий треугольник Pure CSS
.triangle-background {
width: 375px;
/*width of triangle picture background*/
padding-bottom: 325px;
position: relative;
overflow: hidden;
transform-origin: 0 100%;
transform: rotate(7deg);
}
.triangle-background:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(229, 227, 228, 0.85), rgba(229, 227, 228, 0.85)), url("/images/apartments.jpeg");
background-size: cover;
background-position: center top;
transform-origin: 0 100%;
transform: rotate(60deg) skewX(30deg);
}
.triangle-foreground {
position: absolute;
top: 110px;
left: 98px;
border-style: solid;
border-width: 0px 170px 280.8px 170px;
border-color: transparent transparent #85FDF3 transparent;
transform: rotate(50deg);
filter: drop-shadow(1px 1px 2px #BBB);
padding-left: 20px;
padding-top: 40px;
}<div class="triangle-background"></div>
<div class="triangle-foreground"></div>
любая помощь будет удивительным!
при удалении отступов для 'треугольника-foreground', я думаю, треугольник не получается отрезать ... – kukkuz
правильный, @kukkuz, но он становится меньше при удалении прокладки, что я не хочу, чтобы оно уменьшалось. – StuffedPoblano