어떻게 CSS 삼각형을 : 가장 편리한 방법은

수시로 아름다운 현대적인 웹 페이지는 많은 매력적인 그래픽을 포함하고 있습니다. 이들 중 가장 간단한 복수의 요소를 설계하는 데 사용되는 삼각형과 같은 기하학적 형태를 사용한다. 방문자가 그에게 자신의 관심을 돌 렸습니다에 예를 들어, 페이지에 개체에 대한 포인터로 사용된다. 물론, 삼각형의 주요 기능 - 장식,이를 포함하는 블록, 같은 더 현대적이고 매력적인되고있다.

모두가 캐스 케이 딩 스타일 시트를 통해 이러한 그림을 생성하고, CSS의 삼각형을 만드는 방법을 궁금해하는 방법을 알고 있습니다.

사이트의 디자인 응용 프로그램

어디서나 웹 디자인 삼각형합니다. 그들은 팁, 메뉴, 다양한 UI 요소를 만들어집니다. 때때로 그들은 부팅 프로세스의 지표를 만드는 데 사용됩니다. 그리고 이전의 경우는 그들없이 할 수 있었다, 그러나 지금은 불가능하고, 개발자는 이러한 요구 사항에 적응 할 의무가있다. 인터페이스의 부분 사이의 상호의 건설에 중요한 역할을하고 단일 엔티티로 통합 - 결국, 오늘 CSS 삼각형에서 만든.

매우 자주 삼각대를 디자인하는의 레이아웃에 관해서 많은 웹 디자이너는 당황한다. 결국, 어떤 특성을 직접 기하학적 그림을 만들 수 없을 것이라고. 사실,이 작업을 수행하는 여러 가지 방법이 있습니다.

사용하여 프레임을 생성하는 방법

테두리 - 첫 번째 방법은 당신이 CSS에있는 삼각형을 만들 수 있습니다. 그는 프레임을 사용하고 있습니다. border 속성을 사용하여 만든 경계가 직접 삼각형 관련이없는 사실에도 불구하고,이 목적을 위해 가장 자주 사용됩니다.

제로 높이와 객체의 폭뿐만 아니라 두꺼운 경계의 설치를 설정할 때 네 개의 동일한 삼각형으로 나누어 져 광장을 볼 수 있습니다. 트릭은 당신이 단지 필요한 경계를 유지해야하고, 다른 사람을 투명하게하는 것입니다. 그리고 지금, 그것은 CSS 올바른 방향과 색으로 그려진 삼각형을 끈다.

어떤 편집을 사용하여 그림을 그릴 필요가 없기 때문에 속성 "프레임"편리를 사용하여 각도를 만듭니다. 삼각형 매개 변수는 항상 코드에서 변경 될 수 있습니다. 그리고 시간이 개발자를 저장합니다. 프레임의 다른 폭을 결합하여 쉽게 그림을 얻기에 충분하다. 으로 이해 어떻게 작업을 수행 할 수 있습니다 간단하게 만들 빈 요소와 제로 폭, 높이, 매우 두꺼운 프레임 다른 색상의 각 측면. 그래서, 네 개의 투명 삼각형의 세 측면을 다른 종류의 수 있습니다 :

• 삼각형의 왼쪽 찾고, 측면은 동등하다;
• 삼각형, 왼쪽 및 평평 찾고;
• 긴 삼각형이 왼쪽을 향하고;
• 직각 삼각형, 그 직각 왼쪽;
• 아래를보고 삼각형;
• 삼각형 찾는;
• 삼각형, 권리, 그리고 많은 다른 종을 찾고.

psevdoedementov 사용

이러한 기술을 수행 할 수 있습니다 만들 각도에서 팝업 지침 및 팁. 장치에 CSS 삼각형을 통해 연결하려면, 대부분의 프로그래머는 의사 후 같이하기 전에 사용합니다. 당신이 함께 사용할 경우에는 뇌졸중을 갖는 CSS 삼각형에 그릴 수 있습니다.

를 결합함으로써, 개발자들은 속성 적용, 아름다운 슈팅 게임의 다양성을 만들어 상대 : 위치 부모 요소를. 이것은하기 위해 수행 의사 (pseudo)가 아니라 자신의 좌석에서 움직였다.

플러스 삼각형을 만들기위한 CSS 프레임 워크의 사용은 다음과 같습니다 :

• 속성의 도움으로 크기와 색상을 빠르고 쉽게 편집;
• 모든 브라우저를 지원합니다.

단점 :

• 이 프레임을 사용하기 때문에, 기울기, 그림자를 적용 할 가능성이 없다;
• 사용자가 파이어 폭스 브라우저의 페이지를 찾을 때 때때로, 알파 값이 작동하지 않을 수 있습니다,이 이미지를 왜곡합니다.

기성품 사진을 사용하여

삼각형을 작성하는 다음 방법 - 인코딩 된 이미지의 사용이다. 삼각형은 이미지 편집기에서 미리 그려 및 전문 서비스를 제공하는 특별한 코드로 변환됩니다.

이 방법의 장점은 그림자, 그라디언트 및 프레임으로 매우 아름다운 디자인을하고 그냥 모두를 인코딩 할 수 있다는 것입니다. 그러나 단점은 모두가 그래픽 프로그램에 능통하다는 사실이다. 이미지가 매우 큰 경우뿐만 아니라, 코드의 행들은 단순히 거대한함으로써 얻어진다. 이것은 개발자에게 불편하다.

브라우저 Internert 익스플로러 이전 버전의 사용 가치가 별도의 항목입니다. 그들에서, 방법은 간단하게 작동하지 않습니다.

방법 역 광장

한 가지 방법은 CSS 역 광장의 수단을 만드는 것입니다. 두 개의 기본 단위가있다. 그러나 어떤 사람들은 의사를 사용합니다.

첫째, 당신은 사각형을 만들 수 있습니다. 그것은 회전 부재의 내용이 될 것입니다. 이 다이아몬드처럼 보였다 있도록 다음, 45도 배포합니다. 다음에, 시프트 업 및 외부 유닛은 상기 속성 오버플 숨겨져 : 숨김. 이 솔루션은 또한 크로스 브라우저하지 않고, 원하는대로 가끔씩 사진이 표시되지 않습니다.

결과

그래서, 거기에 많은 방법을 만들 삼각형. 만 그것은 모든 CSS 속성에서 손실되지 않습니다? 이 경우에는 항상 참조 도움이 될 것입니다. 이 캐스 케이 딩 스타일 시트의 모든 기능을 설명합니다.

프로그래밍에 가서 CSS 가이드를보고 싶지 않은 사람들을 위해, 삼각형 바로 크기와 색상을 생성 온라인 에디터가있다. 에서 시각적 편집기 는 사용자가 선택하여도 모든 설정을 구성한다. 즉석에서 별도의 창에 배치 CSS 코드 생성기 삼각형으로 변환됩니다. 그런 다음, 생성 된 코드는 단순히 스타일 시트에 삽입하고 페이지의 디자인에 맞게.