主页 / coding / 问题 / 79345203
Accepted
yagazinho
Asked: 2025-01-10 17:28:01 +0800 CST

我怎样才能将这个角边框半径技巧复制到我的项目中的图像上

  • 772

我要复制的示例图像

我一直看到这种类型的边框半径，但我不知道该怎么做，请帮忙

我尝试使用 border-radius 直接对图像的左上角和右下角进行更改，但仍然不起作用

样式表：


.img-section {
    flex: 1;
    padding: 40px;
    position: relative;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px
}

.img-form img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
html

1 个回答

  1. Best Answer

    解决方案 1：使用 css clip-path：

    HTML：

    <img class="clip-svg" src="https://placecats.com/300/400" alt="Cat" />
<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
      <path
        d="M276 20C276 8.95431 267.046 0 256 0H45C36.7157 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 36.7157 0 45V301C0 312.046 8.9543 321 20 321H231C239.284 321 246 314.284 246 306C246 297.716 252.716 291 261 291C269.284 291 276 284.284 276 276V20Z"
        fill="#D9D9D9"
      />
    </clipPath>
  </defs>
</svg>

    样式表：

    .clip-svg { clip-path: url(#myClip);}

    解决方案 2：使用与背景颜色相同的 svg 形状覆盖角落：

    HTML：

    <div class="wrapper">
  <img src="https://placecats.com/300/400" alt="Cat" />
  <svg
    class="shape-bottom-left"
    width="40"
    height="40"
    viewBox="0 0 40 40"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M0 0V40H40C34.4771 40 30 35.5228 30 30V20C30 14.4772 25.5229 10 20 10H10C4.47714 10 0 5.52284 0 0Z"
      fill="white"
    />
  </svg>

  <svg
    class="shape-top-right"
    width="40"
    height="40"
    viewBox="0 0 40 40"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M0 0V40H40C34.4771 40 30 35.5228 30 30V20C30 14.4772 25.5229 10 20 10H10C4.47714 10 0 5.52284 0 0Z"
      fill="white"
    />
  </svg>
</div>

    样式表：

    .wrapper {
  position: relative;
}

img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.shape-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

.shape-top-right {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(180deg);
}
    • 0

相关问题