gazes12
@gazes12

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

628d2d992c923390454892.jpeg
Пробовал через бордеры, выходит так:
628d2e875c33e367477736.png
&__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%;
			}
		}


Можно ли обойтись без загрузки другой картинки по темнее? Заранее спасибо!
  • Вопрос задан
  • 81 просмотр
Решения вопроса 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Это решит вашу задачу
border-radius: 0 0 25% 60%;

https://codepen.io/AnnaSummer/pen/MWQExvG
Ответ написан
@Alexander3928
Если нужен фон для картинки с такой же фигурой, тогда нужно самому. Типо делаешь ::before на весь экран картинки и подбираешь углы.

Может помогут такие источники:
https://bennettfeely.com/clippy/
https://9elements.github.io/fancy-border-radius/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы