固定三角形純粹的CSS

我原本有較小的三角形，但希望它們在頁面上更大，所以我在前景中的三角形中添加了一些填充。當我做到這一點，它切斷了我的三角形，我不知道如何添加它，而不犧牲尺寸。我試過高高在上，那些什麼都不做。固定三角形純粹的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>

任何幫助將是真棒！

來源

2016-09-25 StuffedPoblano

，我猜三角不會被切斷...... – kukkuz

正確，@ kukkuz，但當填充被刪除時它會變小，我不希望它變小。 – StuffedPoblano

要增加的大小你的'三角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>

來源

2016-09-25 11:11:42 LGSon

修復它。謝謝！ – StuffedPoblano

固定三角形純粹的CSS

回答

相關問題