與剪輯路徑 - HTML

Question

響應圖片我需要用於與夾路徑創建圖像的建議。此圖像看起來像右下角的高度稍低。其實我用夾路徑做到了這一點，但同時將邊框樣式我在右下角邊框半徑問題。任何人都可以請提出一些建議。

html { 
 
    padding: 0; 
 
} 
 

 
body { 
 
    margin: auto; 
 
    padding: 0; 
 
    width: 80%; 
 
} 
 

 
div { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.wholediv img { 
 
    clip-path: polygon(5% 5%, 95% 10%, 95% 93%, 5% 93%); 
 
} 
 

 
.wholediv { 
 
    display: block; 
 
    width: 38%; 
 
    clip-path: polygon(0% 0%, 100% 5%, 100% 100%, 0% 100%); 
 
    border-radius: 16px; 
 
    background-color: blueviolet; 
 
}

<div class="wholediv"> 
 
    <img src="http://www.nasa.gov/images/content/531265main_iss027e007014_1600_800-600.jpg" alt="" width="100%" /> 
 
</div>

Answer 1

你可以嘗試border-top-right-radius與這個角落的兩個值。頂縮進使用%，右縮進px：

html { 
 
    padding: 0; 
 
} 
 

 
body { 
 
    margin: auto; 
 
    padding: 0; 
 
    width: 80%; 
 
} 
 

 
div { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.wholediv img { 
 
    clip-path: polygon(5% 5%, 95% 10%, 95% 93%, 5% 93%); 
 
} 
 

 
.wholediv { 
 
    display: block; 
 
    width: 38%; 
 
    clip-path: polygon(0% 0%, 100% 5%, 100% 100%, 0% 100%); 
 
    border-radius: 16px; 
 
    border-top-right-radius: 25% 16px; 
 
    background-color: blueviolet; 
 
}

<div class="wholediv"> 
 
    <img src="http://www.nasa.gov/images/content/531265main_iss027e007014_1600_800-600.jpg" alt="" width="100%" /> 
 
</div>