英文:
Making left border skewed without affecting right border and the image fit the border without getting skewed as well
问题
这是我翻译好的部分:
"我花了几个小时尝试制作这个边框形状,但没有得到期望的结果。我尝试了使用transform: skewX(20度)和clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%);"
"这是最接近的效果"
HTML部分:
<div class="skewed-image">
<img src="/smiling-coworkers.png" alt="Your Image" />
</div>
CSS部分:
.skewed-image {
margin-top: 100px;
margin-left: 200px;
width: 500px;
display: inline-block;
position: relative;
overflow: hidden;
border-right: 2px solid #000; /* 根据需要调整颜色和宽度 */
border-radius: 40px 0 0 40px; /* 根据需要调整半径 */
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%);
}
.skewed-image img {
display: block;
width: 100%;
height: auto;
border-radius: 40px 0 0 40px; /* 与容器相同的半径 */
}
英文:
I tried to make this border shape for hours and not getting the desired result.
I have tried using transform: skewX(20deg) and clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%);
This is the closest one
HTML
<div class="skewed-image">
<img src="/smiling-coworkers.png" alt="Your Image" />
</div>
CSS
.skewed-image {
margin-top: 100px;
margin-left: 200px;
width: 500px;
display: inline-block;
position: relative;
overflow: hidden;
border-right: 2px solid #000; /* Adjust the color and width as needed */
border-radius: 40px 0 0 40px; /* Adjust the radius as needed */
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%);
}
.skewed-image img {
display: block;
width: 100%;
height: auto;
border-radius: 40px 0 0 40px; /* Match the same radius as the container */
} `
答案1
得分: 0
你可以尝试以下CSS,我使用了transform skew,可能不是完全准确,但你可以相应调整CSS:
.skewed-image {
width: 500px;
margin-top: 100px;
margin-left: 200px;
display: inline-block;
position: relative;
overflow: hidden;
border-radius: 70px 0 0 40px;
transform-origin: top;
transform: skew(30deg);
}
.skewed-image img {
display:block;
transform-origin:inherit;
transform:skew(-30deg);
width: 100%;
height: auto;
}
英文:
Can you try below css, I have used transform skew, may not be exact but you can adjust css accordingly:
.skewed-image {
width: 500px;
margin-top: 100px;
margin-left: 200px;
display: inline-block;
position: relative;
overflow: hidden;
border-radius: 70px 0 0 40px;
transform-origin: top;
transform: skew(30deg);
}
.skewed-image img {
display:block;
transform-origin:inherit;
transform:skew(-30deg);
width: 100%;
height: auto;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论