CSS 테두리를 통해 삼각형 그리기

CSS 테두리를 통해 삼각형을 그릴 수 있습니다. 다양한 스타일 조합은 다양한 효과를 가지며 크기, 색상 및 방향을 제어할 수 있습니다. 아래의 다양한 그래픽을 살펴보세요. 여러분이 본 적이 없는 그래픽이 더 많이 있을 수 있다고 생각합니다.

공개 스타일을 먼저 작성하세요.

<span style="color: #008080;">1</span> <span style="color: #800000;">.border </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">4</span>     
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border-color</span>:<span style="color: #0000ff;"> transparent</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-width</span>:<span style="color: #0000ff;"> 1rem</span>;
<span style="color: #008080;">7</span> <span style="color: #ff0000;">    border-style</span>:<span style="color: #0000ff;"> solid</span>;
<span style="color: #008080;">8</span> }

위 CSS를 기반으로 삼각형의 방향을 제어하려면 다음 조합 코드를 추가하세요.

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-right-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-bottom-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-bottom-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-bottom-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-top-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-top-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-bottom-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-right-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-bottom-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-right-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-bottom-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-right-color: #000;</span>

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-bottom-color: #000;</span>

그리고 다음 효과는

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-left-width: 3rem;</span>

다른 조합은 다른 효과를 만들어냅니다. 다양한 조합이 가져오는 효과를 시도해 볼 수 있습니다.