左边框倾斜而不影响右边框,同时使图像适应边框而不会被倾斜。

huangapple go评论57阅读模式
英文:

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
    &lt;div class=&quot;skewed-image&quot;&gt;
      &lt;img src=&quot;/smiling-coworkers.png&quot; alt=&quot;Your Image&quot; /&gt;
    &lt;/div&gt;

 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 */
}	`

This is the desired result (Right image)

答案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;
}

huangapple
  • 本文由 发表于 2023年6月15日 13:45:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/76479438.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定