Как сделать вырез в блоке такой же как в макете?
Как у элемента li сделать такое же отверстие внутри блока как на фотографии?
Ссылка на CodePen: https://codepen.io/websurfers/pen/vYvmwjO
Дополнительно:
демо
<div> <span>123</span> <p>Какой-то текст</p> </div> |
<div> <span>123</span> <p>Какой-то текст</p> </div>
body{ background: gray; } div{ margin: 50px auto; width: 200px; height: 140px; background: radial-gradient(40px 40px at center top, transparent 100%, red 100%); position: relative; display: flex; justify-content: center; align-items: center; color: #fff; border-radius: 20px; } span{ width: 65px; height: 65px; border-radius: 50%; color: firebrick; background: aqua; display: flex; justify-content: center; align-items: center; position: absolute; top: -32px; } |
body{ background: gray; } div{ margin: 50px auto; width: 200px; height: 140px; background: radial-gradient(40px 40px at center top, transparent 100%, red 100%); position: relative; display: flex; justify-content: center; align-items: center; color: #fff; border-radius: 20px; } span{ width: 65px; height: 65px; border-radius: 50%; color: firebrick; background: aqua; display: flex; justify-content: center; align-items: center; position: absolute; top: -32px; }
- спасибо!
- Gracie ST, если считаете ответ решением - стоит его таковым отметить. Это приятно отвечающему и экономит время всем остальным.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать вырез в блоке таким же как в макете, можно использовать CSS свойство border-radius. Это свойство позволяет задать скругленные углы элемента, что создаст эффект выреза.
Пример кода на языке CSS:
.block { width: 200px; height: 100px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 10px; /* задаем радиус скругления углов */ overflow: hidden; /* скрываем все, что выходит за пределы блока */ }
В данном примере блок будет иметь размеры 200px на 100px, серый фон и тонкую серую обводку. С помощью свойства border-radius мы задаем радиус скругления углов блока, в данном случае равный 10px. Свойство overflow: hidden скрывает все содержимое, которое выходит за границы блока, что создает эффект выреза.
Таким образом, применяя вышеуказанные CSS стили к вашему блоку, вы сможете добиться эффекта выреза, как в макете. Не забудьте подстроить размеры и цвета под ваш дизайн.