Помогите разобраться, как сделано сердце с отступом вокруг него. Как получить такую же изогнутую линию? Это возможно с помощью CSS, HTML?
Я знаю, как добавить сердце с помощью CSS или картинки, но как добиться изогнутой границы вокруг него?
Похоже, border-radius здесь не поможет...
Перевод вопроса: Line with indented circle @hermann
Ответ
Конечно же, border-radius поможет. Но придётся подбирать размеры вложенных блоков и согласовывать толщину границ с толщиной линий в иконках.
CSS
Круг помещаем псевдоэлементом в блок с overflow:hidden;. Получаем дугу.
Сердечко берём из Font Awesome. Чтобы задать иконку через стили, создаём ещё один блок с псевдоэлементом. Если бы сердечко не выступало за нижнюю границу дуги и ему не грозил бы добавленный нами overflow:hidden;, то мы поместили бы оба пседоэлемента в один блок.
Позиционируем собранный блок поверх картинки с нижней рыжей границей. Даём отрицательный bottom, чтобы опуститься на ширину границы.
https://codepen.io/glebkema/pen/MoyXxp
.arch {
overflow: hidden;
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
}
.arch:before {
background: white;
border: solid 3px orange;
border-radius: 50%;
box-sizing: border-box;
content: '';
display: block;
position: absolute; top: 0; left: 0;
width: 100%; height: 133.333333%;
}
.heart {
position: absolute; bottom: -3px; right: 60px;
width: 48px; height: 36px;
}
.heart:after {
color: orange;
content: '\f08a'; /* http://fontawesome.io/icon/heart-o/ */
display: block;
font-family: 'FontAwesome';
font-size: 28px;
font-weight: bold;
line-height: 1;
position: absolute; bottom: -4px; left: 0;
text-align: center;
width: 100%;
}
.photo {
background: #9cf;
border-bottom: solid 3px orange;
height: 120px;
position: relative;
}
Комментариев нет:
Отправить комментарий