Все сервисы Хабра
Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Закрыть
Задать вопрос
mishapsv
@mishapsv
HTML
CSS
Вёрстка
Как сделать бордер сложного контура?
Есть элемент
dabblet.com/gist/2937c990d6bfad274740
Как бы вы сделали бордер по его контуру?
Я делал через псевдоэлемент на заднем плане такого же контура. Но получается несимметрично и в самом фоне есть зазоры.
Вопрос задан
более трёх лет назад
148 просмотров
Комментировать
Подписаться
1
Оценить
Комментировать
Facebook
Вконтакте
Twitter
Решения вопроса
1
mishapsv
@mishapsv
Автор вопроса
Самому элементу задать
background-size: 75% 75%;
И добавить псевдоэлемент с теми же свойствами бэкграунда (только цвет другой)
position: absolute;
content: "";
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
z-index: -1;
Ответ написан
более трёх лет назад
Комментировать
Нравится
Комментировать
Facebook
Вконтакте
Twitter
Пригласить эксперта
Ответы на вопрос
3
twobomb
@twobomb
Может
див в диве
?
Ответ написан
более трёх лет назад
5
комментариев
Нравится
5
комментариев
Facebook
Вконтакте
Twitter
mishapsv
@mishapsv
Автор вопроса
@twobomb
К сожалению, у вас тоже видны эти недостатки
Написано
более трёх лет назад
mishapsv
@mishapsv
Автор вопроса
(на обрезанных уголках разная толщина рамок)
Написано
более трёх лет назад
twobomb
@twobomb
mishapsv
: Может
так
Написано
более трёх лет назад
mishapsv
@mishapsv
Автор вопроса
twobomb
к сожалению, при изменении паддингов видны неточности по углам
Написано
более трёх лет назад
twobomb
@twobomb
mishapsv
: Используй svg
Написано
более трёх лет назад
galkan
@galkan
Зазоры можно убрать задавая background-size больше 50%
Ответ написан
более трёх лет назад
Комментировать
Нравится
Комментировать
Facebook
Вконтакте
Twitter
Ankhena
@Ankhena
Куратор тега CSS
Нежно люблю верстку
Без дополнительных блоков и псевдоэлементов
https://jsfiddle.net/1yh48obc/
толщину рамки еще поподгонять надо.
SVG, наверное, будет целесообразнее.
Ответ написан
более трёх лет назад
Комментировать
Нравится
Комментировать
Facebook
Вконтакте
Twitter
Ваш ответ на вопрос
Войдите, чтобы написать ответ
Войти через центр авторизации
Похожие вопросы
JavaScript
+3 ещё
Простой
Почему при отправке HTML-формы данные не поступают в mysql?
1 подписчик
вчера
128 просмотров
1
ответ
HTML
+1 ещё
Простой
Прозрачный DIV перекрывает элемент под ним?
1 подписчик
вчера
95 просмотров
1
ответ
HTML
Средний
Как добавить в HTML страницу воспроизведение музыки?
1 подписчик
вчера
101 просмотр
1
ответ
CSS
+3 ещё
Средний
Яндекс Браузер на MacOS: как убрать или подвинуть иконку автозаполнения?
1 подписчик
вчера
50 просмотров
0
ответов
JavaScript
+2 ещё
Средний
Есть для готовый плагин для проверки css-переменных со следующими фичами (см. описание)?
1 подписчик
24 июл.
52 просмотра
0
ответов
CSS
Простой
Как выровнять крестик?
1 подписчик
23 июл.
101 просмотр
1
ответ
CSS
Простой
Как решить проблему с наложением в сафари?
2 подписчика
22 июл.
293 просмотра
1
ответ
CSS
Простой
Что поправить в градиенте?
1 подписчик
21 июл.
99 просмотров
0
ответов
HTML
+1 ещё
Простой
Как прижать нижние колонки к низу родительского блока?
5 подписчиков
19 июл.
1985 просмотров
3
ответа
CSS
+2 ещё
Средний
Как создать фотогалерею с неявной сеткой в CSS?
1 подписчик
18 июл.
104 просмотра
2
ответа
Показать ещё
Загружается…
Вакансии с Хабр Карьеры
HTML-верстальщик (HTML/CSS/JavaScript)
CleanTalk
от 100 000 ₽
Разработчик Vue.js
Совкомбанк Технологии
•
Красноярск
Frontend developer (JavaScript, jQuery)
Karma8
от 150 000 до 320 000 ₽
Минуточку внимания
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации
Закрыть
Реклама