Как сделать псевдоэлемент для такой интересной картинки?

Question

[gazes12]

Пробовал через бордеры, выходит так:

&__image {
			position: relative;
			&::after{
				content: '';
				background: url('../img/quality/image.svg') no-repeat;
				width: 150px;
				height: 150px;
				position: absolute;
				bottom: 0;
                                left: 0;
			}

			@media(max-width: 1170px){
				&::before{
					content: '';
					width: 98%;
					height: 98%;
					position: absolute;
					top: 0;
					left: 0;
					background: #000;
					z-index: 200;
					opacity: .5;
					border-bottom-left-radius: 100%;
					border-bottom-right-radius: 100%;
				}
			}

			img{
				max-width: 672px;
                                width: 100%;
			}
		}

Можно ли обойтись без загрузки другой картинки по темнее? Заранее спасибо!

Comments

[iBird Rose]

что именно ты хочешь сделать псевдоэлементом? просто наложить черный полупрозрачный overlay?

[Антон Литвиненко]

а чего не вышло через бордер радиус? надо просто нужный задать, а не 100%

Answer 1

[Ankhena]

Это решит вашу задачу
border-radius: 0 0 25% 60%;

https://codepen.io/AnnaSummer/pen/MWQExvG

Comments

[Ankhena]

Можно ли обойтись без загрузки другой картинки по темнее?

Зачем она вам вообще?

Answer 2

[Alexander3928]

Если нужен фон для картинки с такой же фигурой, тогда нужно самому. Типо делаешь ::before на весь экран картинки и подбираешь углы.

Может помогут такие источники:
https://bennettfeely.com/clippy/
https://9elements.github.io/fancy-border-radius/

Comments

[Alexander3928]

Или как вариант, сделать сам родительский элемент с такой формой и накинуть ::before сверху