Закругление для фото HTML?
Никак не могу понять как написать такой код на HTML
Помогите пожалуйста
Дополнительно:
Закругления в основном делаются с помощью border-radius https://developer.mozilla.org/ru/docs/Web/CSS/bord...
Что именно у вас не получилось скруглить?
Пример с проблемой разместите на codepen.io
Закругления не могу получить как на скрине
Если макет в фигме, то она прекрасно показывает размеры и блоков и скруглений.
Если нет, то хоть подложите вниз макет, да подберите размеры.
spoiler
<div class="signature"> <div class="purple-box"> <div class="photo"> <img src="" alt="Circle Image" id="circle-image"> </div> </div> </div> |
<div class="signature"> <div class="purple-box"> <div class="photo"> <img src="" alt="Circle Image" id="circle-image"> </div> </div> </div>
.signature { font-family: Arial, sans-serif; font-size: 14px; line-height: 1.6; margin-top: 10px; padding-top: 10px; border-top: 1px solid #ccc; position: relative; /* с виду лишнее */ overflow: hidden; /* с виду лишнее */ } .purple-box { display: flex; width: fit-content; background-color: purple; border-radius: 0 50% 50% 0; } .purple-box::before { content: ""; flex-shrink: 0; width: 20px; background-color: green; z-index: 1; border-radius: 0 10% 10% 0; /*аккуратно тут с процентами..*/ } .photo { display: block; width: 80px; height: 80px; margin: 10px; } .photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } |
.signature { font-family: Arial, sans-serif; font-size: 14px; line-height: 1.6; margin-top: 10px; padding-top: 10px; border-top: 1px solid #ccc; position: relative; /* с виду лишнее */ overflow: hidden; /* с виду лишнее */ } .purple-box { display: flex; width: fit-content; background-color: purple; border-radius: 0 50% 50% 0; } .purple-box::before { content: ""; flex-shrink: 0; width: 20px; background-color: green; z-index: 1; border-radius: 0 10% 10% 0; /*аккуратно тут с процентами..*/ } .photo { display: block; width: 80px; height: 80px; margin: 10px; } .photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
Ответы:
Два простейших варианта:
1. элемент со скругленными углами у которого картинка в фоне.
2. clip-path
берите что вам удобнее.
Гуглите border-radius.
1. border-radius делаете >= 50% и у вас получается круг.
2. Закругление можно делать по отдельным сторонам блока.
Делаешь блок и задаешь ему Border-radius: 0px 0px 10px 10px; последовательность точно не помню, разберешься, но это то что тебе нужно
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для закругления фотографий в HTML можно использовать CSS свойство border-radius. Это свойство позволяет создавать закругленные углы у любого элемента, включая изображения.
Пример использования border-radius для закругления фотографий:
<img src="photo.jpg" style="border-radius: 50%">
В этом примере значение 50% для border-radius создаст круглое изображение. Вы также можете задать конкретное значение в пикселях, чтобы указать радиус закругления.
<img src="photo.jpg" style="border-radius: 10px">
Кроме того, вы можете задать разные значения для каждого угла, используя сокращенную запись:
<img src="photo.jpg" style="border-radius: 10px 20px 30px 40px">
Это создаст изображение с закругленными углами разного радиуса. Помните, что поддержка CSS свойства border-radius может различаться в разных браузерах, поэтому рекомендуется провести тестирование на различных устройствах и браузерах, чтобы убедиться, что закругление фотографий выглядит правильно везде.