CSS 모양으로 디자인하는 방법 : 도입

Sep 10, 2025

어떻게

모든 웹 사이트의 기초는 콘텐츠가있는 작은 요소로 페이지를 하위 아래로 나누는 것입니다. 디자이너를위한이 큰 문제는 콘텐츠가 항상 직사각형이라는 것입니다. 스크린은 직사각형이며 그 모든 세분은 사각형이 될 것입니다. 이 튜토리얼에서는 CSS 클립 경로 속성과 회전을 사용하여 직사각형 모양을 넘어서는 방법을 검토하여 디자인을보다 흥미롭게 만듭니다. 다른 방법으로 디자인을보다 재미있게 만드는 방법은 우리의 예를 확인하십시오. CSS 애니메이션 ...에 이 모든 것이 너무 많은 일이 일어나면 상단을 사용해보십시오. 웹 사이트 빌더 대신에. 그러나 귀하의 사이트의 요구가 무엇이든, 당신은 오른쪽을 얻을 필요가 있습니다. 웹 호스팅 너를 위해서.

시작하는 가장 쉬운 모양은 원이나 타원형입니다. 직사각형이 있고 모든 테두리 반경을 50 % 이상으로 설정하면 타원형이 있으며 사각형으로 시작하면 모든 측면이 같은 길이이므로 원을 얻을 수 있습니다. 이것은 이전에 수행 한 것입니다. 그러나 종종 페이지 디자인으로 자주 사용되는 기술입니다.

20 개의 최고의 와이어 프레임 도구

보다 복잡한 해결책은 CSS 클립 경로를 사용하여 DIV의 가시 부분을 줄이기 위해 삼각형을 만드는 것입니다. 삼각형은 세 가지 점 만 있기 때문에 작성하는 것은 상당히 간단하지만보다 복잡한 모양을 만들려면 시각적 인 클립 경로 편집기가 필요합니다.

이 자습서에서는 그라디언트 및 회전 사각형을 포함하여 이러한 모든 요소를 모두 추가하는 방법을 보여줍니다. CSS 그라디언트를 추가하고 CSS를 통해 복잡한 기하학적 디자인을 만들 수 있습니다.

파일로에서 자습서의 파일을 다운로드하십시오

01. 시작하십시오

그를 엽니 다 스타트 IDE 코드 편집기의 폴더를 편집하기 시작합니다. index.html. 페이지. 자습서를 시작하려면 Google Fonts TypeFaces에 대한 간단한 링크 업 링크 업이 필요합니다. 그래서 일부 텍스트가 나중에 포함되어 있으면 페이지에 적절한 TypeFaces가 추가 될 수 있습니다.

& lt; 링크 rel = "스타일 시트"href = "css / shapes.css"& gt; & lt; 링크 href = "https://fonts.googleapis.com/ CSS? 패밀리 = 아보 : 700 | 라리아 : 700 "rel ="스타일 시트 "& gt;

02. 앵커를 함께 묶어 라

그 몸 페이지의 태그 다음 콘텐츠를 추가하십시오. 그만큼 모양이 포함되어 있습니다 DIV 태그는 생성 된 모든 다른 모양을 유지하는 데 사용되며 브라우저 뷰포트를 채우도록 만들어집니다. 생성 될 첫 번째 모양은 다른 이미지를 함께 고정시키는 간단한 원입니다.

 & lt; div id = "shape_contain"& gt;
& lt; Div ID = "원"& gt; & lt; / div & gt;
& lt; / div & gt;

03. 페이지를 만드십시오

이제 그에게 넘겨주세요 CSS. 폴더 및 열기 셰이프 .css. 파일. 본문과 HTML은 단지 브라우저를 오른쪽 글꼴 패밀리로 채우도록 설정되어 튜토리얼의 끝을 마무리 곡으로 향하게하여 추가 할 텍스트의 대부분을 설정합니다.

 몸,
html {
마진 : 0;
패딩 : 0;
너비 : 100 %;
높이 : 100VH;
Overflow-X : 숨김;
글꼴 - 가족 : 'LATO', SANS-SERIF;
텍스트 변환 : 대문자;
}

04. 도형을 포함합니다

Mountain scene on a computer screen — 배경 이미지로 시작하십시오

다음 CSS 규칙은 ID의 ID를위한 것입니다. Shape_Contain ...에 이것은 숨겨진 모든 오버 플로우로 브라우저를 채우도록 설정됩니다. 그만큼 번역 3D. 콘텐츠가 하드웨어 가속화되었는지 확인하는 것입니다. 큰 테두리가 두 개의 배경 이미지 앞에 추가됩니다. 하나는 정기적 인 이미지입니다. 위의 하나는 아쿠아 색상의 반투명 그라디언트입니다.

 #shape_contain {
박스 크기 조정 : Border-Box;
너비 : 100 %;
높이 : 100VH;
오버플로 : 숨김;
변환 : translate3d (0, 0, 0);
테두리 : 20px 고체 RGB (255, 254, 244);
배경 : 선형 그라디언트 (0DEG, RGBA (7,
47, 46, 0.8) 0 %, RGBA (255, 252, 226, 0.5)
100 %), URL (../ 이미지 / mountain.jpg)
리프티브 센터 센터 없음;
배경 크기 : 덮개;
}

05. 원으로 시작하십시오

Mountain background with blue translucent circle — 서클은 만드는 가장 쉬운 모양입니다

생성 될 첫 번째 기하학적 모양은 가장 간단한 모양 중 하나입니다. 원은 어떤 정사각형 모양으로 만들 수 있습니다. 이면 경계 반경을 추가하여 50 % ...에 원은 반투명이며 부드러운 그림자가 가장자리에 첨가됩니다.

 #circle {
너비 : 80VH;
높이 : 80VH;
국경 반경 : 50 %;
배경 : RGBA (136, 239, 231, 0.3);
위치 : 절대;
상단 : 7VH;
왼쪽 : 50 %;
변환 : translate3d (-50 %, 0, 0);
상자 - 그림자 : 0px 5px 40px RGBA (0, 0, 0, 0.3);
}

06. 삼각형을 시도하십시오

다음 모양은 삼각형이기 때문에 약간 더 복잡합니다. 다각형 모양을 만들 수있는 CSS 클립 경로를 사용하여 작성하는 것이 상대적으로 간단합니다. 이 div를 그 안에 추가하십시오 Shape_Contain div.

 & lt; div id = "tri1"& gt; & lt; / div & gt;

07. 삼각형을 적용하십시오

Triangle with cropped woman's face within in, on top of the blue circle — 필터가 색조를 약간 이동합니다

여기에 있습니다 클립 경로 삼각형을 만들기 위해 CSS를 위해 만들어집니다. 모양은 단순히 3 점입니다. 배경 이미지가 첨가되고, 필터가 여기에 첨가되어 색조를 약간 시프트 할 수 있도록 이미지를 약간의 핑크색 색조로 채취 할 수 있습니다.

 # tri1 {
클립 경로 : 다각형 (0 0, 100 % 0, 50 %
100 %);
너비 : 100VH;
높이 : 88VH;
배경 : URL (../ 이미지 / girl3.jpg)
리프티브 센터 센터 없음;
배경 크기 : 덮개;
위치 : 절대;
상단 : 10VH;
왼쪽 : 50 %;
변환 : translate3d (-50 %, 0, 0);
필터 : 색조 회전 (310DEG) 대비 (140 %);
불투명도 : 0.8;
}

08. 더 복잡 해지십시오

Screengrab of Clip-Path maker tool — 이 도구를 사용하면보다 복잡한 모양을 만들 수 있습니다

생성 될 다음 모양은 중간에 구멍이있는 삼각형이 될 것입니다. 이것은 상대적으로 간단하지만 클립 다각형은 하나의 연속 선이 필요하므로 만들기가 더 복잡합니다. 비슷한 모양을 만들어야하는 경우 사용하십시오. Bennett의 클립 경로 메이커 모양을 만들려면.

 & lt; div id = "tri2"& gt; & lt; / div & gt;

09. 셰이프를 쌓아 두십시오

여기에있는 모양은 이전에 언급 한 링크에서 시각적으로 생성 되었기 때문에 더 복잡합니다. 구름 이미지가 모양에 위치하고 색조가 조정되어 조금 더 노란색으로 만들어줍니다. 각 형상은 주변 DIV의 중심에 절대적으로 배치되고 다른 하나의 상단에 하나씩 누적됩니다.

 # tri2 {
클립 경로 : 다각형 (50 % 0, 0 % 100 %, 9 % 100 %,
50 % 17 %, 50 % 17 %, 85 % 91 %, 13 % 91 %, 0 100 %,
100 % 100 %, 50 % 0);
너비 : 80VH;
높이 : 70VH;
배경 : URL (../ 이미지 / Clouds.jpg)
리프티브 센터 센터 없음;
배경 크기 : 덮개;
위치 : 절대;
상단 : 1VH;
왼쪽 : 50 %;
변환 : translate3d (-50 %, 0, 0);
필터 : 색조 회전 (90DEG) 대비 (140 %);
불투명도 : 0.7;}

10. 브라우저의 크기 조정을 해보십시오

다음 삼각형을 새로 추가해야합니다 Shape_Contain div. 브라우저를 확인하면 브라우저의 크기를 조정할 수 있고 셰이프가 백분율을 기반으로하는 것처럼 완벽하게 크기를 조정할 수 있습니다. 컨테이너는 뷰포트 높이로 설정되므로 항상 화면에 적합합니다.

 & lt; div id = "tri3"& gt; & lt; / div & gt;

11. 스타일을 올리십시오

More triangles layered on top of the design — 마지막 삼각형에는 중심에 구멍이 있습니다

마지막 삼각형은 중앙의 구멍이있는 이전 모양과 동일한 모양을 사용합니다. 이번에는 이미지가 아닌 청록색 그늘이 단순히 있습니다. 투명도는이 삼각형을 통해 아래 다른 내용으로 볼 수 있도록 낮게 설정됩니다.

 # tri3 {
클립 경로 : 다각형 (50 % 0, 0 % 100 %, 9 % 100 %,
50 % 17 %, 50 % 17 %, 85 % 91 %, 13 % 91 %, 0 100 %,
100 % 100 %, 50 % 0);
너비 : 80VH;
높이 : 70VH;
배경 : RGBA (0, 113, 110, 0.2);
위치 : 절대;
상단 : 20VH;
왼쪽 : 50 %;
변환 : translate3d (-50 %, 0, 0);
}

12. 각진 스트립을 만듭니다

Design with angled pink strip added — 반투명 그라데이션을 사용하여 각진 스트립을 혼합하십시오.

다음 모양은 각진 Div 모양입니다. 이것은 삼각형 1과 두 가지 사이에 배치 될 것입니다. Shape_Contain div 태그. 화면을 가로 지르는 반투명 그라디언트를 사용하여 페이지에 혼합하십시오. 이들은 또한 다른 크기의 화면으로 확장됩니다.

& lt; div id = "strip1"class = "스트립"& gt; & lt; / div & gt;

13. 각도를 만드십시오

Screengrab from CSS Gradient tool — ID는 모양의 위치를 설정합니다

그만큼 조각 클래스 배경 그라디언트를 설정합니다. 이것은 온라인 그라디언트 편집기를 사용하여 만들어집니다 CSS 그라디언트 ...에 그런 다음 ID는이 특정 각진 그라디언트 모양의 위치를 설정합니다. 그것은 중앙에 배치 된 다음 서로 다른 모니터에 일관된 배치를 유지하도록 약간 떨어져 있습니다.

. 스트립 {
위치 : 절대;
배경 : 선형 - 그라디언트 (0DEG, RGBA (164,
0, 217, 0) 0 %, RGBA (164, 0, 217, 0.3) 35 %,
RGBA (255, 67, 134, 0.3) 65 %, RGBA (255, 67,
134, 0) 100 %);
}
# Strip1 {
너비 : 20VH;
높이 : 120VH;
왼쪽 : 50 %;
변환 : translate3d (-175 %, -15 %, 0)
Rotatez (30DEG);
}

14. 더 많은 그라디언트 각을 시도하십시오

클래스를 유지하는 두 가지 DIV 태그가 추가되었습니다. 조각 ...에 ID는 화면의 다른 위치에 배치 할 수 있습니다. 이들은 장면의 전반적인 미적을 구축하는 반복적 인 모양으로 사용되어 색상의 스플래시를 추가합니다.

 & lt; div id = "strip2"class = "스트립"& gt; & lt; / div & gt;
& lt; div id = "strip3"class = "스트립"& gt; & lt; / div & gt;

15. 각도를 배치하십시오

Final design, featuring layered CSS shapes on a photographic background — 최종 추가 사항은 디자인을 균형 잡게합니다

두 개의 스트립 각도 그래디언트 모양은 화면의 주 콘텐츠의 각면에 위치합니다. 하나는 왼쪽 하단쪽으로 배치되고 다른 하나는 화면을 균형있게 균형을 유지합니다. 이러한 요소를 화면에 놓고 끼워 넣기 위해 스케일을 보려면 브라우저의 크기를 조정하십시오.

 # Strip2 {
너비 : 5VH;
높이 : 90VH;
왼쪽 : 50 %;
변환 : translate3d (60VH, -15 %, 0)
Rotatez (30DEG);
}
# Strip3 {
너비 : 5VH;
높이 : 90VH;
왼쪽 : 50 %;
변환 : translate3d (-70vh, 25 %, 0)
Rotatez (30DEG);
}

16. 일부 텍스트 내용을 추가하십시오

이 페이지에는 많은 양의 텍스트 콘텐츠가 없지만 Div가 나머지 페이지 컨텐츠가 모두 화면에 배치됩니다. DIV는 닫는 DIV 태그 전에 추가해야합니다. Shape_Contain 패널. 이 텍스트 요소는 다른 모서리로 나뉩니다.

& lt; div id = "왼쪽"& gt; 직사각형을 넘어 가라. & lt; / div & gt; & lt; div id = "오른쪽"& gt; 반응 형 모양 레이아웃 & lt; / div & gt; & lt; div id = "topleft"& gt; 웹 디자이너 & lt; br & gt; css toolkit & lt; / span & gt; & lt; / div & gt; & lt; Div ID = "TopRight"& gt; 2019 & lt; & lt; Div ID = "헤드 라인"& gt; CSS 형태 & lt;

17. 텍스트를 회전시킵니다

왼쪽 Div는 화면의 왼쪽에 절대적으로 배치되며, 옆으로 시계 반 시계 방향으로 회전하여 측면이 부족합니다. 변환 원점은 텍스트가 화면 가장자리에 더 가깝게 맞추기 위해 약간 움직이게됩니다.

 #leftside {
위치 : 절대;
왼쪽 : 20px;
상단 : 70 %;
변환 원산지 : 10 % 0 %;
변환 : 회전 (-90DEG);
}

18. 오른손 텍스트를 배치하십시오

오른손 텍스트는 화면의 오른쪽에서 위치한 왼쪽 텍스트와 매우 유사합니다. 회전은 텍스트가 더 좋고 화면 오른쪽에서 더 쉽게 읽을 수 있도록 회전을 시계 방향으로 밀어 넣어야합니다.

 #rightside {
위치 : 절대;
오른쪽 : 20px;
상단 : 70 %;
변형 기원 : 90 % 0 %;
변환 : 회전 (90DEG);
}

19. 텍스트를 양식

이제 왼쪽 왼쪽 모서리의 텍스트가 양식화되어 있습니다. 처음 두 단어는 기본 크기로 남아 있고 나머지 단어가 텍스트에 계층 구조를 제공하기 위해 다음 줄에서 확대되고 배치됩니다. 이렇게하면 모든 크기 조정을 통해 왼쪽 상단에 충돌합니다.

 #topleft {
위치 : 절대;
왼쪽 : 40px;
상단 : 40px;
너비 : 180px;
텍스트 - 정렬 : 센터;
}
#topleft span {
글꼴 크기 : 1.8em;
}

20. 오른손 텍스트를 설정하십시오

오른쪽 상단 모서리의 텍스트가 설정됩니다. 이것은 흑인 라운드 원 안에 설정되어 있으며 원에 대하여 흰색으로 설정된 텍스트가 있습니다. 이는 라인 높이를 DIV 높이와 동일한 라인 높이를 사용하여 중앙의 텍스트를 정렬하기위한 라인 높이 방법을 사용합니다.

 #topright {
위치 : 절대;
오른쪽 : 35px;
상단 : 25px;
선 - 높이 : 100px;
글꼴 크기 : 1.4em;
너비 : 100px;
높이 : 100px;
배경 : # 000;
색상 : #fff;
텍스트 - 정렬 : 센터;
국경 반경 : 50 %;
}

21. 헤드 라인 텍스트를 설정하십시오

Final design shown within a mobile-sized browser window — 설정할 마지막 텍스트는 주요 제목입니다.

설정할 바로 마지막 텍스트는 화면 중앙의 주요 제목입니다. TypeFace가 변경 되며이 페이지 디자인의 하이라이트 색상으로 블렌드가 블렌드되도록 핑크색 반투명 색상이 부여됩니다. 페이지를 저장하고 브라우저를 새로 고치면 완성 된 결과를 볼 수 있습니다. 페이지 사본을 저장하거나 공유하고 싶습니까? 그것을 PDF로 내보내고 저장하십시오 클라우드 스토리지 ...에

 #headline {
위치 : 절대;
너비 : 100 %;
Z- 색인 : 200;
패딩 - 상단 : 65VH;
글꼴 - 가족 : 'Arvo', serif;
텍스트 - 정렬 : 센터;
색상 : RGBA (233, 173, 255, 0.8);
글꼴 크기 : 8VW;
텍스트 - 그림자 : 0px 3px 50px RGBA (0, 0, 0, 0.5);
}

이 기사는 원래 크리에이티브 웹 디자인 잡지에 출판되었습니다. 웹 디자이너 ...에 구매 284. 또는 구독 ...에

자세히보기 :

CSS 아트를 시작하십시오
5 Cool CSS Grid Generators
CSS 방법론에 대한 웹 디자이너 가이드

CSS 모양으로 디자인하는 방법 : 도입

01. 시작하십시오

02. 앵커를 함께 묶어 라

03. 페이지를 만드십시오

04. 도형을 포함합니다

05. 원으로 시작하십시오

06. 삼각형을 시도하십시오

07. 삼각형을 적용하십시오

08. 더 복잡 해지십시오

09. 셰이프를 쌓아 두십시오

10. 브라우저의 크기 조정을 해보십시오

11. 스타일을 올리십시오

12. 각진 스트립을 만듭니다

13. 각도를 만드십시오

14. 더 많은 그라디언트 각을 시도하십시오

15. 각도를 배치하십시오

16. 일부 텍스트 내용을 추가하십시오

17. 텍스트를 회전시킵니다

18. 오른손 텍스트를 배치하십시오

19. 텍스트를 양식

20. 오른손 텍스트를 설정하십시오

21. 헤드 라인 텍스트를 설정하십시오

어떻게 - 가장 인기있는 기사

혼합 미디어 아트 튜토리얼 : 디지털 아트웍을 수채화시키는 방법

브러시 펜 그리기를 향상시키는 6 개의 빠른 팁

Zbrush UI로 똑똑한 작업

친 화성 디자이너 : Pixel Persona 사용 방법

추상으로 완벽한 버전 제어 유지

Zbrushcore의 PolyPaint 도구로 3D 메쉬 페인트

Angular 2

underpainting과 최선의 사용 방법을 발견

카테고리