html - 固定三 Angular 形纯CSS

我最初有较小的三角形，但希望它们在页面上更大，所以我在前景的三角形中添加了一些填充。当我这样做时，它切掉了我的一些三角形，我不知道如何在不牺牲尺寸的情况下将其重新添加。我尝试了heigth和width，但这些都什么也没做。

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

任何帮助都是极好的！

最佳答案

要增加大小，请像我在此处一样将边框宽度从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>

关于html - 固定三 Angular 形纯CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39682362/