CSS로 기울어 진 가장자리를 만드는 법
이 글에서는 웹 페이지에서 (수평으로) 각진 가장자리 효과를 만드는 방법을 살펴 보겠습니다. 기본적으로 다음과 같이 보입니다.
가장자리가 약간 기울어지면 웹 레이아웃이 덜 단단하고 둔하게 보입니다. 이 트릭을 수행하기 위해 우리는 의사 요소 ::전에 과 ::후 과 CSS3 변환.
의사 요소 사용
이 기술은 의사 요소를 사용합니다. ::전에 과 ::후 요소 모서리를 각을 이루도록합니다. 이 예에서는 하단 가장자리를 조정합니다..
.block height : 400px; 너비 : 100 %; 위치 : 상대적; 배경 : 선형 그래디언트 (오른쪽, rgba (241,231,103,1) 0 %, rgba (254,182,69,1) 100 %); .block :: after content : "; 너비 : 100 %, 높이 : 100 %, 위치 : 절대, 배경 : 상속, Z- 인덱스 : -1, 아래쪽 : 0, 변환 원점 : 왼쪽 하단, 변환 : skewY (3 단계);
요약하자..
그만큼 변형 원점 변환하려는 요소의 좌표를 지정합니다. 위의 예에서 지정한 왼쪽 아래 블록의 왼쪽 하단에 시작 좌표를 넣을 것입니다..
그만큼 변형 : skewY (3deg); ~을 만든다. ::후 각도를 3도에서 비뚤어 지거나 각도를 잡습니다. 시작 좌표를 왼쪽 하단으로 지정 했으므로 블록의 오른쪽 하단이 3도 올라갑니다. 우리가 변형 원점 에 오른쪽 아래 왼쪽 하단 모서리가 3도 증가합니다..
단색 배경이나 그라디언트를 추가하여 결과를 볼 수 있습니다..
Sass Mixin으로 더 쉽게 만들 수 있습니다.
이 작업을보다 쉽게 수행하기 위해 나는 각진 가장자리를 추가하여 스타일 규칙의 복잡성을 처리 할 때 두통을 뺀 Sass 믹스 인을 만들었습니다. 다음 믹스를 사용하면 왼쪽 상단, 오른쪽 상단, 왼쪽 하단 또는 오른쪽 하단을 비뚤어지게 지정할 수 있습니다..
@mixin angle-edge ($ pos-top : null, $ angle-top : null, $ pos-btm : null, $ angle-btm : null) width : 100 %; 위치 : 상대적; 배경 : 선형 그래디언트 (오른쪽, rgba (241,231,103,1) 0 %, rgba (254,182,69,1) 100 %); & : before, & :: after content : "; 너비 : 100 %, 높이 : 100 %, 위치 : 절대, 배경 : 상속, Z- 인덱스 : -1, 전환 : 모두 완화 .5s; @if $ pos-top @if $ pos-top == 'topleft'top : 0; 변환 원점 : 오른쪽 상단; 변환 : skewY ($ angle-top); @if $ pos-top = = 'topright'top : 0; 변환 원점 : 왼쪽 위; 변환 : skewY (- $ angle-top); @if $ pos-btm & :: after @if $ pos-btm == 'bottomleft'bottom : 0; 변환 원점 : 오른쪽 하단; 변환 : skewY (- $ angle-btm); @if $ pos-btm == 'bottomright'아래 : 0; 변환 원점 : 왼쪽 아래; transform : skewY ($ angle-btm);
믹스 인에는 4 가지 변수가 있습니다. 처음 두 변수, $ pos-top 과 $ angle-top, ~을 지정하다 탑 스타트 좌표 그리고 정도. 후자의 두 변수는 동등 어구 그리고 정도 그 바닥 측면.
네 가지 변수를 모두 채우면 요소의 위쪽과 아래쪽을 각각 각도를 지정할 수 있습니다.
Sass 사용 @포함 구문을 사용하여 믹스 인을 요소에 삽입합니다. 아래 예를 볼 수 있습니다.
기울어 진 가장자리를 추가하려면 왼쪽 상단 측면:
.블록 @ 포함 각도 - 가장자리 (topleft, 3deg);
기울어 진 가장자리를 추가하려면 오른쪽 하단 측면:
.블록 @include angle-edge (bottomright, 3deg);
기울어 진 가장자리를 추가하려면 왼쪽 상단 과 오른쪽 하단 측면:
.블록 @ 포함 각도 - 가장자리 (topleft, 3deg, bottomright, 3deg);
아래는 믹스가 적용된 데모입니다. 다른 스타일로 전환하려면 선택 상자를 변경하십시오..
그게 다야.!
