CSS에서 이중 테두리로 삼각형을 만드는 방법

이 튜토리얼에서는 CSS에서 이중 테두리가 있는 삼각형을 디자인하는 개인적인 접근 방식을 여러분과 공유하고 싶습니다.

내가 처리한 문제를 더 잘 설명하겠습니다. 알림 목록을 표시하는 React 구성 요소를 개발 중이었습니다.

이 구성 요소는 사용자가 UI의 특정 아이콘을 클릭할 때 나타나며 클라이언트의 UX 팀이 공유하는 디자인 시스템에서 구성 요소에는 테두리가 있어야 하며 해당 테두리에는 오른쪽 상단 모서리에 작은 화살표가 포함되어 있습니다.

이제 구성 요소 주변의 경계가 없었다면 솔루션은 매우 간단했을 것입니다. 기본 div와 섞이는 한 가지 색상과 바로 위에 있는 화살표. 대신 이 경우 CSS Tricks 에 대한 이 문서에 기록된 대로 border 속성을 이미 사용하는 삼각형 주변에서도 이 테두리를 얻는 방법을 알아내야 합니다.

다음 이미지는 내가 얻어야 할 것을 더 잘 설명합니다.


이 문제를 어떻게 해결했는지 봅시다. 분명히 다른 솔루션을 알고 있다면 공유하십시오. 읽어보고 싶습니다.

마크업

간단한 마크업부터 시작하겠습니다.

<div class="message-box"></div>

멋진 것은 없고 그냥 빈 div입니다. 분명히 당신은 당신이 원하는 것을 입력할 수 있습니다. 이 튜토리얼은 CSS 삼각형에만 초점을 맞추고 있습니다.

스타일

마크업에 스타일을 추가해 보겠습니다.

.message-box {
  width: 100px; /* Just for demo purpose */
  height: 100px; /* Just for demo purpose */
  background-color: #fff;
  border: 1px solid #E6E8EB;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
  position: relative;
}

노련한 CSS 애호가라면 이해하기 쉽지만 초보자라면 명확하게 해두자.

내 div가 비어 있고 내가 무엇을 하고 있는지 확인해야 하기 때문에 고정 너비와 높이를 설정했습니다. 다음으로 나는 평범한 흰색과 1px의 은색 테두리로 배경을 설정합니다. 나는 그림자를 좋아하기 때문에 그림자를 설정하고 마지막으로 위치를 상대 위치로 설정합니다. 잠시 후에 만들 화살표가 절대 위치를 가지기 때문입니다.

이 부분이 명확하면 삼각형을 추가합시다.

(첫 번째) 삼각형

화살표나 삼각형을 추가하려면 원하는 대로 호출하세요. 의사 요소::before를 사용할 수 있습니다. 해보자.

.message-box::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #E6E8EB;
}

여기서 의사 요소를 만들고 삼각형을 만듭니다. 그것이 어떻게 작동하는지 더 잘 이해하고 싶다면 앞서 언급한 기사를 읽으십시오.

여태까지는 그런대로 잘됐다. 이 시점에서 결과는 다음과 같습니다.


참고: 테두리는 확대해서 조금 크게 보이므로 작게 해도 괜찮습니다. 결국 1px여야겠죠? :)

여기 내 문제에 대한 해결책이 있습니다.

(두 번째) 삼각형

이제 의사 요소를 사용하여 두 번째 삼각형을 만들어야 하지만 이번에는 ::after를 사용합니다.

.message-box::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  position: absolute;
  top: -5px;
  right: 10px;
}

글쎄, 그것은 내가 원하는 것이 아닙니다. 지금은 흰색 삼각형만 볼 수 있습니다. 맞습니다. 단순히 이전 것을 복제했지만 이제 약간의 조정이 필요합니다.

.message-box::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
  position: absolute;
  top: -3.8px;
  right: 11px;
}

무슨 일이에요? 테두리를 1px 줄이고 top 및 right 값을 사용하여 이 결과를 얻었습니다.



그게 전부입니다. CSS로 만든 삼각형에 두 번째 테두리를 만드는 것 이상은 아닙니다.

전체 코드는 다음과 같습니다.

.message-box {
  width: 100px; /* Just for demo purpose */
  height: 100px; /* Just for demo purpose */
  background-color: #fff;
  border: 1px solid #E6E8EB;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
  position: relative;
}

.message-box::before,
.message-box::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
}

.message-box::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #E6E8EB;
  top: -5px;
  right: 10px;
}

.message-box::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
  top: -3.8px;
  right: 11px;
}

당신은 다른 접근법을 가지고 있습니까? 의견에 대해 알려주십시오.

읽어주셔서 감사합니다 👋

📸 Will Francis