CSS를 사용하여 삼각형 기호를 구현하는 방법(코드 포함)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS를 사용하여 삼각형 기호를 구현하는 방법(코드 포함)

云罗郡主

Oct 10, 2018 am 09:25 AM

이 문서의 내용은 CSS를 사용하여 삼각형 기호를 구현하는 방법에 대한 것입니다. 코드에는 특정 참조 값이 있으므로 도움이 될 수 있습니다.

아래 그림은 길이와 너비가 100px이고 테두리 너비가 100px인 요소입니다. CSS에서 위쪽, 아래쪽, 왼쪽 및 오른쪽 테두리의 교차점이 직선이 아니므로 삼각형이 표시됩니다. 기호는 이 속성에 따라 작성될 수 있습니다

이 CSS 속성을 사용하여 삼각형 기호의 효과를 얻는 방법은 다음과 같습니다.

html code

<body>
    <p></p></body>

css code

p:after{
    position: absolute;
    width: 0px;
    height: 0px;
    content: " ";
    border-right: 100px solid transparent;
    border-top: 100px solid #ff0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

Rendering:

이 방법은 의사 클래스를 사용하여 삼각형 기호를 구현한 다음 공간을 차지하지 않는 절대 위치 지정을 사용합니다.

원하는 경우 투명합니다. 삼각형 기호를 다른 방향으로 지정하려면 해당 방향을 변경하면 됩니다. 테두리 색상을 추가하고 다른 색상은 투명 색상으로 변경하세요

위 내용은 CSS를 사용하여 삼각형 기호를 구현하는 방법에 대한 완전한 소개입니다(코드 포함). . 이 기사의 내용은 간단합니다. 더 많은 정보를 얻으려면 PHP 중국어 넷을 참조하십시오.

위 내용은 CSS를 사용하여 삼각형 기호를 구현하는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 博客园에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

슬라이드 아웃 바닥 글Apr 09, 2025 am 11:50 AM

마크 업이라는 매혹적인 새 사이트가 방금 시작되었습니다. 태그 라인 : Big Tech가 당신을보고 있습니다. 우리는 큰 기술을보고 있습니다. 위의 위대한 일. 그만큼

좋아하는 페이지Apr 09, 2025 am 11:47 AM

나는 다른 날 JavaScript로 RSS 피드를 구문 분석하는 것에 대해 게시했습니다. 또한 RSS 설정에 대해 Feedbin이 어떻게 핵심인지에 대해 이야기했습니다.

Codepen Gutenberg Embed Block for Sanity.io를 재현합니다Apr 09, 2025 am 11:43 AM

Chris Coyier의 WordPress의 Gutenberg 편집기 구현에서 영감을 얻은 Sanity Studio를위한 미리보기로 사용자 정의 코드펜 블록을 만드는 방법에 대해 알아보십시오.

CSS와 라인 차트를 만드는 방법Apr 09, 2025 am 11:36 AM

라인, 바 및 파이 차트는 대시 보드의 빵과 버터이며 모든 데이터 시각화 툴킷의 기본 구성 요소입니다. 물론 SVG를 사용할 수 있습니다

접근 가능한 색상 조합을 생성하기 위해 SASS를 프로그래밍합니다Apr 09, 2025 am 11:30 AM

우리는 항상 웹에 더 액세스 할 수 있도록하고 있습니다. 색상 대비는 수학 일 뿐이므로 Sass는 디자이너가 놓친 에지 케이스를 다룰 수 있습니다.

SVG에서 타탄 패턴을 생성하는 정적 사이트를 만드는 방법Apr 09, 2025 am 11:29 AM

타탄은 일반적으로 스코틀랜드, 특히 세련된 킬트와 관련된 패턴의 천입니다. tartanify.com에서 우리는 5,000 개가 넘는 타탄을 모았습니다

PHP 템플릿에 대한 후속 조치Apr 09, 2025 am 11:14 AM

얼마 전, PHP 템플릿에 대해 PHP (기본적으로 HEREDOC 구문)에 대해 게시했습니다. 나는 문자 그대로 그 기술을 사용하여 슈퍼 기본을 사용합니다

부트 스트랩 구성 요소가있는 모달 이미지 갤러리 생성Apr 09, 2025 am 11:10 AM

다른 사진을보기 위해 탐색으로 더 큰 버전의 이미지를 열어주는 웹 페이지의 이미지를 클릭 한 적이 있습니까?

See all articles

핫 AI 도구

뜨거운 도구

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는