CSS로 삼각형과 평행사변형을 구현하는 방법은 무엇입니까?
- 零下一度원래의
- 2017-06-26 15:25:191899검색
최근에 기술적인 웹사이트를 탐색하다가 기사에 나오는 키워드 스타일이 너무 멋지다고 느꼈습니다. 페이지네이션 스타일이죠. 스크린샷은 다음과 같습니다.
홈페이지 하단에도 페이징 바가 보이는데 보기에 좋지 않나요? 이것이 어떻게 달성되는지 봅시다~
첫 번째 방법: 테두리 사용
첫 번째 방법은 테두리 속성을 사용하여 삼각형을 잘라낸 다음 직사각형을 통해 두 개의 삼각형을 연결하여 최종적으로 평행사변형을 만드는 것입니다. 테두리를 사용하여 삼각형을 생성할 수 있는 이유는 무엇입니까? 먼저 사진을 보겠습니다.
사진 속 세 개의 작은 도형이 변하는 과정을 살펴보면 이미 절반 정도 이해하셨을 것입니다. 실제로 해킹에는 두 가지 조건만 있으면 됩니다. 첫째, 요소 자체의 길이와 너비가 0이고, 둘째, 테두리 색상을 통해 불필요한 부분을 숨깁니다. 비슷한 방법으로 사다리꼴도 만들 수 있습니다. 위 그림의 세 가지 모양에 대한 코드는 다음과 같습니다.
#첫 번째 {
너비: 20px;
높이: 20px;
border-width: 10px;
border-style: solid;
border-color: 빨간색 녹색 파란색 갈색;
}
# 두 번째 {
너비: 0;
높이: 0;
border-width: 10px;
border-style: solid;
border-color: 빨간색 녹색 파란색 갈색;
}
#third {
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: red transparent transparent transparent;
}
다음 단계는 어떻게 할지 고려하는 것입니다. 평행사변형을 그립니다. 보더 방식에서는 왼쪽 삼각형, 직사각형, 오른쪽 삼각형의 세 부분으로 구성됩니다. 평행사변형을 그릴 때마다 세 개의 요소를 생성하는 것은 너무 번거롭기 때문에 여기서는 :before 및 :after 의사 요소를 선택하는 것이 좋습니다. 이 효과를 달성해 보겠습니다.
삼각형과 직사각형을 원활하게 연결하려면 여러 속성이 일관되어야 하므로 Less, Sass, Stylus 등과 같은 CSS 전처리기를 사용하여 이 코드를 작성하면 코드를 유지 관리하기가 더 쉬워집니다. Scss 버전에 대한 내용은 다음과 같습니다.
//삼각형의 너비와 높이
$height: 24px;
$width: 12px;
//평행사변형의 세 부분에 색상 지정
@mixin 평행사변형-color($color) {
배경 : $color;
&:before { border-color: transparent $color $color transparent }
&:after { border-color: $color transparent transparent $color; /단일 삼각형 스타일
@mixin 삼각형() {
content: '';
display: block;
width: 0;
height: 0;
position: 절대;
border-style: solid ;
테두리 너비: $height/2 $width/2;
top: 0;
}
//평행사변형 스타일
.para {
display: 인라인 블록;
위치: 상대;
padding: 0 10px;
height: $height;
line-height: $height;
margin-left: $width;
color: #fff;
&:after {
@include 삼각형 ( );
right: -$width;
}
&:before {
@include Triangle();
left: -$width;
}
@include 평행사변형-색상(빨간색);
}
$height 및 $width로 설정된 삼각형의 기울기가 너무 작거나 크면 들쭉날쭉한 렌더링이 발생할 수 있으므로 주의해야 합니다. 그것을 사용하여.
html5와 같은 웹 프론트엔드 기술을 배우고 교환하고 싶고, 프론트엔드 측면에 대해 더 알고 싶다면 QQ 학습 그룹: 27062964에 가입하여 함께 배우고 소통하며 자신을 향상하고 학습할 수 있습니다. 자료 및 소스 코드 공유. 또는 링크를 클릭하여 그룹에 직접 참여하세요.
두 번째 방법: 변형을 사용하세요
변환을 사용하여 평행사변형을 구현하세요. 효과는 아마도 이렇습니다.
보고 나서 정말 대단하다고 생각했습니다. 평행사변형의 외부 윤곽선만 가능하다는 것이 밝혀졌습니다. (방법 1은 채우기 효과가 있는 평행사변형만 생성할 수 있기 때문에) 주로 변환: Skew(...)의 도움으로 구현하는 것이 매우 간단합니다.
.city {
display: inline-block;
padding: 5px 20px;
border: 1px solid #44a5fc;
color: #333;
transform: 기울이기(-20deg);
}
Shanghai
걱정하지 마세요. 전체 div를 왜곡하여 가운데 텍스트가 기울어지게 되었는데 이는 분명히 우리가 원하는 효과가 아닙니다. 따라서 원하는 효과를 얻으려면 내부 요소를 추가하고 내부 요소를 역으로 왜곡해야 합니다.
구현 코드는 CodePen 예제와 함께 다음과 같습니다.
.city {
디스플레이: inline- 블록;
padding: 5px 20px;
border: 1px solid #44a5fc;
color: #333;
transform: 기울이기(-20deg);
}
.city div {
변환: 기울이기( 20deg);
}
요약
첫 번째 방법은 테두리 속성을 사용하여 삼각형을 만들고 마지막으로 세 요소를 이어붙이는 방식입니다. ; 두 번째 방법은 변환을 사용하여 평행사변형을 얻습니다. 전반적으로 두 번째 방법은 첫 번째 방법보다 크기가 훨씬 작고 이해하기 쉽습니다. 유일한 단점은 이 사이트의 페이지 매김에 사용된 것과 같은 사다리꼴을 생성할 수 없다는 것입니다.
이 글이 도움이 되셨으면 좋겠습니다.
학습 과정에서 문제가 발생하거나 학습 자료를 얻고 싶다면 학습 교류 그룹에 가입하실 수 있습니다
위 내용은 CSS로 삼각형과 평행사변형을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!