固定三角纯 CSS

Question

我最初有较小的三角形，但希望它们在页面上更大，所以我在前景中的三角形中添加了一些填充。当我这样做时，它切断了我的一些三角形，我无法弄清楚如何在不牺牲尺寸的情况下将它加回去。我尝试了高度和宽度，但它们什么也没做。

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

任何帮助都会很棒！

Answer 1

要增加尺寸，请更改边框宽度，就像我在这里所做的那样，从 0px 170px 280.8px 170px; 到 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>

固定三角纯 CSS

Fixing Triangle Pure CSS

html

css

position