CODEWITHSUNDEEP
htmlcssposition
StuffedPoblano
StuffedPoblano

Reputation: 695

Fixing Triangle Pure CSS

I originally had smaller triangles but wanted them bigger on the page, so I adding some padding to the triangle in the foreground. When I did this, it cut off some of my triangle and I can't figure out how to add it back without sacrificing size. I tried heigth and width and those don't do anything.

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

here is a provided screenshot

any help would be awesome!

Upvotes: 0

Views: 47

Answers (1)

Asons
Asons

Reputation: 87191

To increase size you change the border width, like I did here, from 0px 170px 280.8px 170px; to 0px 190px 300.8px 190px

.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 190px 300.8px 190px;
  border-color: transparent transparent #85FDF3 transparent;
  transform: rotate(50deg);
  filter: drop-shadow(1px 1px 2px #BBB);
}
<div class="triangle-background"></div>
<div class="triangle-foreground"></div>

Upvotes: 1

Related Questions