Краткое руководство по созданию этих причудливых границ 😉
Вы когда-нибудь видели или представляли себе какие-нибудь конструкции границ для ваших HTML-элементов и задавались вопросом, как их создавать. Хорошо, что у меня есть! И, просмотрев пару блогов, я решил, что нет особого способа добиться цели. Просто проявите изобретательность!
Меня зовут Эммануэль Стивен, я изучаю интерфейсную веб-разработку в течение последних 4 месяцев, и это практически моя первая статья о фронтенд-разработке.
Ниже представлена пара, которую я создал при написании этого поста.
А теперь перейдем к делу!
Чтобы создать одну из этих причудливых границ и многое другое, требуется использование нескольких элементов DOM.
Основному элементу необходима граница и другие элементы, чтобы вырезать некоторые части границы основного элемента.
Это, как я уже отмечал ранее, все о творчестве и, конечно, о том, как должна выглядеть граница, о которой идет речь.
Теперь, без лишних слов, давайте взглянем на один из созданных мной Стиль границы 4.
Https://codepen.io/stephcrown/pen/dyYwdrz
Я создал два элемента div. Один для верхней части, другой для нижней части. Затем я перенес второй div прямо под первый, чтобы они выглядели как один. Конечно! В этом вся идея.
Я стилизовал часть границ каждого из блоков div, и у нас есть один элемент div со стилизованной рамкой. Вы можете просмотреть код в ручке выше.
На следующий!
Давайте посмотрим на пример стиля границы 1…
Https://codepen.io/stephcrown/pen/qBOLxYq
Это более распространенный подход. Использование фиктивного элемента, чтобы вырезать часть границы основного элемента и при этом выглядеть так, будто ее никогда не было (это фиктивный элемент)
Я создал два div. Главный и фиктивный (надеюсь, я использую это слово в правильном смысле).
Установив ширину и высоту первого div, я установил ширину второго немного больше, чем у первого, поэтому он покрывает всю ширину первого. Я установил высоту относительно ниже, чем первая. Придавая второму div радиус границы 50%, форма стала эллиптической. Это важно, поскольку верхняя часть эллипса отвечает за внутреннюю кривую границы первого.
Наконец, я сделал цвет фона второго элемента таким же, как у основного элемента (белый). Это так, похоже, что его никогда не было, и у нас есть наш единственный стилизованный элемент div -border.
Это ручки других примеров
Https://codepen.io/stephcrown/pen/MWaZQLW
Посмотрите их и проявите изобретательность!
Как я уже отмечал ранее, это моя первая статья о фронтенд-разработке, и, конечно же, я все еще нахожусь на самом первом этапе обучения. Я буду признателен за исправления и критику, а также за то, как я мог бы сделать это лучше.
Спасибо.
