与剪辑路径 - 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>