Início / coding / Perguntas / 79345203
Accepted
yagazinho
Asked: 2025-01-10 17:28:01 +0800 CST

Como posso replicar esse truque de raio de borda de canto em uma imagem do meu projeto?

  • 772

A imagem de amostra que estou tentando copiar

Tenho visto esse tipo de raio de borda, mas não sei como fazer, por favor me ajude

Tentei efetuar alterações diretamente nos cantos superior esquerdo e inferior direito da imagem usando border-radius, mas ainda não funciona

CSS:


.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 respostas

  1. Best Answer

    Solução 1: Use 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>

    CSS:

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

    Solução 2: sobreponha seus cantos com formas svg na cor do seu fundo:

    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>

    CSS:

    .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

relate perguntas