CSS3에서 삼각형을 만드는 방법

4753 단어 csstutorialwebdev
안녕! CSS3에서 삼각형을 만드는 방법에는 여러 가지가 있습니다. 이 게시물에서는 border 속성을 사용하여 그 중 하나를 보여 드리겠습니다.

첫 번째!



1- 환경 준비



모든 텍스트 편집기를 사용할 수 있지만 vscode를 권장합니다 :).

이제 폴더를 만들고 그 안에 두 개의 index.html 및 style.css
Linux를 사용하는 경우 다음을 입력하십시오.

mkdir triangleExample
cd triangleExample
touch index.html style.css


그런 다음 vscode 입력에서 폴더를 엽니다.

code .


다음!



2- 간단한 정적 웹 페이지 만들기



섹션 태그와 내부에 클래스 삼각형이 있는 div를 사용하여 html 콘텐츠를 작성합니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Triangle Example</title>
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <section class="section">
            <div class="triangle"></div>
        </section>
    </body>
</html>


섹션 태그의 기본 스타일을 작성합니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


브라우저에서 index.html 파일을 엽니다(Google Chrome을 권장합니다 :))

드디어!



3- 삼각형 만들기



여기에 도착하면 삼각형 스타일을 입력하기만 하면 됩니다.

.triangle {
    width: 0;
    height: 0;
    display: inline-block;
    border: 50px solid transparent;
    border-top-color: crimson;
}


브라우저에서 다음과 같은 내용을 볼 수 있습니다.



작동 방식...?



비결은 삼각형에 width 또는 height 가 없고 border 속성을 50px(원하는 크기 :))로 설정한다는 것입니다.

또한 border-style는 단색이므로 완전히 칠해져 있고 border-color는 투명하므로 아무것도 보이지 않습니다.

그러나 예를 들어 border-top-color를 진홍색으로 설정하면 요소의 위쪽만 볼 수 있습니다(다른 면은 투명하기 때문). 사실 삼각형입니다!

이러한 값을 가지고 놀면서 아무 면이나 칠할 수 있으며 직사각형 삼각형을 칠할 수도 있습니다.

이를 달성하려면 삼각형 스타일에서 위쪽과 왼쪽border을 칠하기만 하면 됩니다.

    border-top-color: crimson;
    border-left-color: crimson;


다음과 같은 내용이 표시되어야 합니다.



사용 예



웹 페이지에서 삼각형의 용도는 다양합니다.

다음과 같이 화살표가 있는 메시지 상자를 만들 수 있습니다.



이를 달성하기 위해 "message-box"클래스를 사용하여 삼각형을 div 태그로 감싸고 그 안에 메시지를 넣습니다.

<div class="message-box">
    Message Box!
    <div class="triangle"></div>
</div>


그런 다음 메시지 상자 요소 스타일을 수정합니다.

.message-box {
    background-color: crimson;
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    border-radius: 6px;
}


마지막으로 삼각형을 올바르게 만들고 배치합니다.

.message-box .triangle {
    display: inline-block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: crimson;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}


올바른 위치 지정을 위해 position: absolute를 삼각형으로 설정했습니다. 메시지 상자 바로 아래 중앙에 위치해야 하기 때문입니다.

센터링의 경우 left: 50% 속성을 설정하여 중간 바로 뒤에 요소를 칠합니다(페인트가 정확히 중간에서 시작되기 때문에) 크기의 절반으로 이동해야 하며 이를 위해 transform: translateX(-50%) 를 사용합니다.

결론



이제 CSS3에서 삼각형을 쉽게 만드는 방법을 알아야 합니다.

이러한 값을 가지고 놀면서 페이지에 완벽한 삼각형을 만들 수 있습니다!
Jetpack Compose에서 하단 탐색을 추가하는 방법은 무엇입니까?
kafka connect e elasticsearch를 관찰할 수 있습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage