CSS에서 다각형을 구현하는 방법

CSS에서 다각형을 구현하는 방법: 먼저 HTML 샘플 파일을 만든 다음 변환의 기울이기 속성을 사용하여 평행사변형을 구현한 다음 이전 의사 요소를 사용하여 삼각형을 구현하고 마지막으로 평행사변형 행과 삼각형을 결합합니다. 다각형.

이 기사의 운영 환경: windows7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

CSS에서 다각형을 구현하는 방법은 무엇입니까?

CSS | 흥미로운 다각형 구현

프론트엔드 개발의 길은 멀습니다. 웹 세계로 가는 길에 우리는 다각형 디자인을 접했을 것입니다. a professional '추구하다'의 프론트엔드는 당연히 '자기 학대'입니다... 오늘은 프론트엔드 프로그래밍에서 폴리곤을 구현하는 방법에 대해 먼저 생각해 보도록 하겠습니다. 먼저 구현해 보세요.

렌더링

"구현하는 방법", "이탤릭체 위쪽에 있는 텍스트가 있나요?", "맙소사, img를 직접 주면 너무 귀찮은 것 같아요." 긴장을 풀고 심호흡을 한 후 저를 따라 CSS를 다듬는 방법을 알아보세요.

이 라벨 모양의 다각형은 평행사변형과 직각삼각형의 조합으로 볼 수 있습니다. 직사각형부터 시작해 보겠습니다.

단순한 너비와 높이

그렇다면 직사각형은 어떻게 평행사변형이 될까요? 예를 들어 철사로 만든 직사각형을 어떻게 평행사변형으로 바꿀 수 있나요? 누군가 대답했습니다. 아주 간단합니다. 조금만 비틀면 됩니다. 그건 그렇고, 그것은 왜곡, 즉 변형의 왜곡 속성입니다.

transform:skew(-10deg);

야 이때 누가 물어보니 위쪽으로 치우친거 아니냐? 깨는 방법, 걱정하지 마세요, 보세요:

transform: 기울이기(-10deg) 회전(-8deg)

좋아, 거의 다 끝났지만 아직 삼각형이 남아 있습니다. 여기 위 그림이 있습니다:

너비:0; 높이: 0

코드는 다음과 같습니다.

삼각형 코드

왜 앞에 의사 요소를 사용하나요? 알다시피, 레이아웃을 용이하게 하기 위해 너비와 높이를 매우 영리하게 0으로 설정하고 일반적으로 보는 대부분의 다각형을 포함하여 테두리의 색상과 위치를 사용하여 설정합니다. 이는 거의 동일한 원리입니다. 최종 코드는 다음과 같습니다.

CSS 탐색기로서 다양한 테두리를 설정하고 이를 변환과 결합하여 어떤 독창적인 효과가 있는지 확인해보세요. 다섯개 별, 팔각형... 손끝에서 사용해 보세요. 폴리곤 세계를 공격하세요.

추천 학습: "css 동영상 튜토리얼"

위 내용은 CSS에서 다각형을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!