CSS 리본을 만드는 방법

우리는 또한 기본 치수 그리고 배경색 CSS와.

 .카드 배경색 : 베이지; 높이 : 300px; 마진 : 40px; 너비 : 500px;  

리본 중간 부분

우리는 CSS 변수 (우리가 CSS 값을 저장하고 재사용 할 수있게 해줌) --피 에 패딩 값을 저장한다.. 의 가치 심 속성은 var (- p) 리본의 왼쪽과 오른쪽 패딩을위한 구문 쉽게 넓혀졌다. 그만큼 --피 변수는 나중에있을 것이다. 여러 번 재사용; 우리 코드를 유연하게 만든다..

 .리본 --p : 15px; background-color : rgb (170,170,170); 높이 : 60px; 패딩 : 0 var (- p); 너비 : 100 %;  

아래의 스크린 샷에서 데모가이 시점에서 어떻게 보이는지 확인할 수 있습니다.

리본 센터링하기

우리는 또한 리본 중심에 놓다.. 우리 패딩 크기만큼 왼쪽으로 밀다. ( --피 변수) 상대 위치 지정 사용.

 .리본 --p : 15px; background-color : rgb (170,170,170); 높이 : 60px; 패딩 : 0 var (- p); 위치 : 상대적; 오른쪽 : var (- p); 너비 : 100 %;  

업데이트 된 데모 :

리본의 측면

이제 우리는 리본의 왼쪽과 오른쪽 카드 가장자리 주변에서 겉으로는 구부러져 야합니다. 그렇게하기 위해 Google은 :전에 과 :후 의사의 .리본.

두 유사 요소는 모두 배경색을 상속합니다. .리본, 우리는 필터 : 밝기 (.5) 그들의 색깔을 조금 어둡게하는 규칙. 그들은 또한 절대 위치 그들의 (상대적으로 배치 된) 부모 내에서.

너비는 패딩 크기와 동일, 우리는 그들을 배치한다. 리본의 왼쪽 끝과 오른쪽 끝 ~을 사용하여 왼쪽 : 0 과 오른쪽 : 0 스타일 규칙.

 .ribbon : before, .bonbon : after background-color : 상속; .Bribon : before left : 0; .ribon : after content : "; : 표시 : 블록, 필터 : 밝기 (.5), 높이 : 100 %, 위치 : 절대, 폭 : var (-p) 오른쪽 : 0; 

이제 우리가 추가 한면이있는 리본이 아래와 같이 보입니다.

측면 기울이기

리본의 측면을 만들려면 구부러진 모양, 우리는 측면을 45 ° 기울이기. 그만큼 변형 : skewy () CSS 규칙 수직으로 요소를 기울이기.

 .리본 : before (왼쪽 : 0; 변형 : 비뚤어 짐 (45deg);  .libbon : after right : 0; 변형 : skewy (-45deg);  

측면의 가장자리를 볼 수 있듯이 정렬하지 마라. 변환 후에, 우리는 그들을 끌어 내리다.

측면 맞춤

에 적당한 길이를 결정하다 옆면을 아래로 이동시켜야하므로 삼각법을 사용합니다.. 우리가 찾아야 할 것은 엑스, 같이 와이 변의 폭입니다 (패딩 사이즈와 동일). .리본), 각도 θ 45 ° (기울기 각도).

결과 엑스 그때 반으로 줄어들 필요가있다., 왼쪽과 오른쪽도 마찬가지로.

CSS 전 처리기 검사를 사용하고 있다면 탠 껍질 함수를 사용하거나, 탄젠트 차트 또는 계산기를 참조하여 각도의 접선 값을 알아 내라.. 우리는 운이 좋다. 황갈색 45 ° ~이다. 1, 이는 엑스 같음 와이 우리의 경우.

 .ribbon : before, .bonbon : after background-color : 상속; width : var (-p); : 표시 : 블록, 필터 : 밝기 (.5), 높이 : 100 %, 위치 : 절대, 위쪽 : calc (var (- p) / 2) 

이후 엑스 반으로 줄이면 우리는 calc () CSS 기능을 나누기위한 기능 --피 변하기 쉬운.

마지막으로 우리는 z 축을 따라 측면을 정렬 뿐만 아니라 Z- 색인 : -1 규칙을 좌우로 리본 중간 부분 뒤에 배치하십시오..

 .ribbon : before, .bonbon : after background-color : 상속; 너비 : var (- p); z- 크기 : 10000; 위치 : 절대; 위쪽 : calc (var (- p) / 2); 색인 : -1; 

이제 양면을 정렬 했으므로 CSS 리본이 완성되었습니다..

아래에서 라이브 데모를 다시 확인할 수 있습니다. 일부 추가 스타일링도 사용합니다..