Fix Triangle Pure CSS

Question

私は元々小さな三角形を持っていましたが、それらをページ上で大きくしたいので、前景の三角形にいくつかのパディングを追加しました。私がこれをしたとき、それは私の三角形のいくつかを切断し、私はサイズを犠牲にすることなくそれを戻す方法を理解することができません。私はheigthと幅を試み、それらは何もしない。

.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

私は `三角形foreground`のためのパディングを削除するとき、私は三角形を推測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>