위원소를 삼각형으로 만들다

처음으로 시뮬레이션 요소로 삼각형을 만들었기 때문에 여러 가지 수치를 더 이동해 봤다.
우선 시뮬레이션 요소로 삼각형을 만든다.
삼각형은border로 만든 것이다.
삼각형 시뮬레이션 요소로 검색하면 큰 인기를 끌기 때문에 수많은 기사를 보면서 먼저 썼다.
html

<div class="triangle">
    <p>三角形をつくる</p>
</div>

css

.triangle::after{
    content: " ";
    border-style: solid;
    border-color:  #aaa transparent transparent transparent;
    border-width: 10px ;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 0px;
    width: 0px;
}

그럼 이렇게 되는 거야.

작아서 커지고 싶어요.
왠지width가 0px에서 50px로 변한 것 같아.

오, 뻗었어.
그럼 하이트도 50px로 합시다.
...변하지 않다.
참, border니까.
크기는border-width가 부담합니다.
그럼width와height는 0px,border-width는 50px를 되돌려줍니다.

다 컸어.
이렇게 하면 크기가 자유롭게 바뀔 수 있다.
그런데 삼각형의 모양이 똑같다고요?
나도 각도를 바꾸고 싶다.
그러면 각도도 바뀐다.
우선 이해하기 쉽도록 각 부분에 색을 더해 보세요.
참고로 위의 코드에 적힌transparent는 투명하다는 뜻입니다.
나는 border-color를 아래의 모양으로 바꾸어 보았다.(방금 만든 삼각형의 왼쪽 상단 이동, 코드 복사,after는before,border-width는30px로 변한다.)
(before와 after에 관한 보도https://www.sejuku.net/blog/54556）
css

    border-color:  #0df #09b #057 #002;

그럼 이렇게

첫 번째 값은 위, 두 번째 값은 오른쪽, 세 번째 값은 아래, 네 번째 값은 왼쪽에 대응한다.
네 개의 삼각형이 중심을 향해 정사각형을 형성한다.
이렇게 네 가지 색깔이 똑같으면 정사각형의 아날로그 요소가 완성된다.
다음은 현재 30px로 통일된border-width를 바꾸어 보겠습니다.
css

    border-width: 30px 60px;

그래서 이렇게.

가로로 뻗어 무너지지 않았다.
이 상태에서 테두리 색깔의 1, 2, 3개 값을transparent로 설정하면 오른쪽의 삼각형
2, 3, 4개를transparent로 설정하면 아래의 삼각형을 형성할 수 있습니다.

처음 만들어진 삼각형과는 다른 삼각형이 되었다.완성했습니다.

border-width에 값을 1개 추가하면 위의 그림의 빨간색, 노란색, 분홍색, 파란색 네 군데가 모두 이 값(즉 정사각형)이 됩니다.
두 개를 넣으면 빨간색과 분홍색이 첫 번째, 노란색과 파란색이 두 번째 값을 반영한다.
3개를 넣으면 빨간색은 1번째, 노란색과 파란색은 2번째, 분홍색은 3번째 값을 반영한다.
3개를 넣었을 때의 모양이 이런 느낌이다.
css

    border-width: 30px 60px 10px;

조합에 따라 각도를 좋아하는 삼각형을 만들 수 있다.
〈번외편〉
・border-width:30px;이렇게border-style을solid에서dotted로 바꾸어 보세요.

모서리가 잘 둥글다.
그중border-width:30px60px;세로≠가로로 가면 모양이 무너진다.

이런 느낌.응, 원각 상태에서border-radius를 사용하면 될 것 같아.
· 같은 조건에서border-style을 더블로 설정해 보세요.

border-width를 30px60px로 설정해도 붕괴되지 않습니다.

왠지 재미있어, 기회가 되면 쓰고 싶어.
그나저나 Dashed는 Solid와 마찬가지로 웨이브도 없습니다.
끝.