Блог

Ищете разумный способ использовать CSS только для применения левого закругленного угла к изображению. Использование стандартного свойства CSS border radius не подходит, так как оно слишком круглое. Лучшее, что я мог придумать, это разместить SVG-изображение с эффектом округления поверх изображения — не идеально, так как иногда это может «мерцать» при загрузке страницы.

 .banner {background:hotpink}

.img-wrap:before {
content: "";
background: url(img/rounded-corner-left.svg) no-repeat;
position: absolute;
top: 0;
width: 100%;
display: block;
background-size: contain;
height: 100%;
background-position: top left;
z-index: 2;
}
  

Используя этот параметр border-radius, указанный в ответе, эффект будет слишком закругленным в верхней части изображения.

 border-radius: 20% 0 0 0 / 100% 0 0 0;
  

Свойство border-top-left-radius определяет радиус верхнего левого угла. или измените другие значения, например: right, left, bottom …

Пример :

 border-radius: 120px 20px 120px 20px;
border-radius: 0 50% 50% 50%;
border-radius: 40px 40px 0 0; // example this one is rounded top left corner 
only
  

Просто поиграйте со значениями, чтобы попробовать и посмотреть сами, как это подходит лучше всего или с учетом ваших особенностей.

Я не уверен, насколько круглой вы хотите, чтобы левая сторона была, поэтому приведенный ниже фрагмент кода показывает, как сделать левую сторону 100% круглой:

 .image-with-rounded-corner-on-the-left {
  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
}  

 <img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=667amp;q=80" alt="enter image description here" class="image-with-rounded-corner-on-the-left">  

И ниже показано, как сделать его круглым на 10%:

 .image-with-rounded-corner-on-the-left {
  border-top-left-radius: 10%;
  border-bottom-left-radius: 10%;
}  

 <img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=667amp;q=80" alt="enter image description here" class="image-with-rounded-corner-on-the-left">  

Вы можете настроить, насколько круглой вы хотите сделать левую границу в процентах от линий

 border-top-left-radius: [put percentage here];
border-bottom-left-radius: [put percentage here];