英文:
How to show image as attached shape using html css
问题
以下是您要翻译的内容：
我尝试使用线性渐变但无法在左上角实现边框半径。
英文:
I tried to do it using linear-gradient but unable to achieve border radius on top left corner.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.img-container {
background-image: url('https://loremflickr.com/680/520/car,forest');
background-repeat: no-repeat;
background-size: cover;
border-radius: 0px 42px 42px 4px;
position: relative;
width: 600px;
height: 320px;
background-position: 100%;
}
.img-container::before {
content: '';
position: absolute;
left: 0;
top: -4px;
width: 182px;
height: calc(100% + 2px);
background: linear-gradient(to top left, transparent 50%, white 50.1%)
bottom left / 182px no-repeat transparent;
}
<!-- language: lang-html -->
<div class="img-container"></div>
<!-- end snippet -->
答案1
得分: 1
倾斜变换可以在这里有所帮助：
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
.img-container {
border-radius: 10px;
height: 250px;
width: 400px;
overflow: hidden;
transform-origin: bottom;
transform: skewX(-20deg);
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0px 42px 42px 4px;
transform-origin: bottom;
transform: skewX(20deg); /* 反向值在这里 */
}
<!-- 语言: lang-html -->
<div class="img-container">
<img src="https://loremflickr.com/680/520/car,forest">
</div>
<!-- 结束代码片段 -->
英文:
Skew transformation can help here:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.img-container {
border-radius: 10px;
height: 250px;
width: 400px;
overflow: hidden;
transform-origin: bottom;
transform: skewX(-20deg);
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0px 42px 42px 4px;
transform-origin: bottom;
transform: skewX(20deg); /* the opposite value here */
}
<!-- language: lang-html -->
<div class="img-container">
<img src="https://loremflickr.com/680/520/car,forest">
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论