CSS 로 상단에 삼각형이 있는 콘텐츠 컨테이너 만들기

소개

이 랩에서는 CSS 를 사용하여 상단에 삼각형이 있는 콘텐츠 컨테이너를 만드는 방법을 배우겠습니다. 이는 시각적인 흥미를 더하고 계층 구조를 생성하기 위해 많은 웹사이트와 애플리케이션에서 사용되는 일반적인 디자인 요소입니다. 이 랩이 끝나면 이 효과를 만들고 자신의 프로젝트에 적용할 수 있는 기술을 갖추게 될 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

상단 삼각형이 있는 테두리

index.html 및 style.css는 이미 VM 에 제공되었습니다.

상단에 삼각형이 있는 콘텐츠 컨테이너를 만들려면 다음 단계를 따르세요.

::before 및 ::after 의사 요소 (pseudo-elements) 를 사용하여 두 개의 삼각형을 만듭니다.
삼각형의 border-color와 background-color를 컨테이너와 일치하도록 설정합니다.
::before 삼각형의 border-width를 ::after 삼각형보다 1px 더 넓게 설정하여 테두리 역할을 하도록 합니다.
::after 삼각형을 ::before 삼각형의 오른쪽으로 1px 이동시켜 왼쪽 테두리가 표시되도록 합니다.

다음은 컨테이너에 대한 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 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.