Создайте контейнер с содержимым с треугольником вверху

Введение

В этом практическом занятии мы научимся создавать контейнер с содержимым с треугольником вверху с использованием CSS. Это распространенный элемент дизайна, используемый на многих веб-сайтах и приложениях, чтобы добавить визуальный интерес и создать чувство иерархии. В конце этого практического занятия вы приобретете навыки для создания этого эффекта и применения его в своих собственных проектах.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Граница с верхним треугольником

В ВМ уже предоставлены index.html и style.css.

Чтобы создать контейнер с содержимым с треугольником вверху, следуйте шагам:

Используйте псевдо-элементы ::before и ::after, чтобы создать два треугольника.
Задайте border-color и background-color треугольников, чтобы они совпадали с контейнером.
Задайте border-width для треугольника ::before на 1px шире, чем для треугольника ::after, чтобы он служил в качестве границы.
Разместите треугольник ::after на 1px правее треугольника ::before, чтобы показалась левая граница.

Вот пример HTML-кода для контейнера:

<div class="container">Border with top triangle</div>

И вот соответствующий CSS-код:

.container {
  position: relative;
  background: #ffffff;
  padding: 15px;
  border: 1px solid #dddddd;
  margin-top: 20px;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 19px;
  border: 11px solid transparent;
}

.container::before {
  border-bottom-color: #dddddd;
}

.container::after {
  left: 20px;
  border: 10px solid transparent;
  border-bottom-color: #ffffff;
}

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие "Граница с верхним треугольником". Вы можете практиковаться в других практических занятиях в LabEx, чтобы улучшить свои навыки.