CSS3 간단한 그래픽 그리기 튜토리얼

CSS는 Cascading Style Sheets(영어 정식 이름: Cascading Style Sheets)로, HTML(Standard Universal Markup Language의 응용 프로그램) 또는 XML(Standard Universal Markup Language의 하위 집합)과 같은 파일 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다. CSS는 웹페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립트 언어와 협력하여 웹페이지의 다양한 요소의 형식을 동적으로 지정할 수도 있습니다. CSS는 웹 페이지의 요소 위치 레이아웃에 대해 픽셀 수준의 정밀한 제어를 수행할 수 있고 거의 모든 글꼴 크기 스타일을 지원하며 웹 페이지 개체 및 모델 스타일을 편집할 수 있습니다.

다음은 CSS로 그래픽을 그리는 방법을 가르쳐 주는 몇 가지 작은 사례입니다.

<style>
    #triangle {        width: 0;        border-style: solid;        border-width: 50px 50px 50px 50px;        border-color: red blue orange gray;
    }</style><div id="triangle"></div>

효과는 다음과 같습니다.

<style>
    #triangle2 {        width: 0;        border-style: solid;        border-width: 50px 50px 50px 50px;        border-color: red red grey grey;
    }</style><div id="triangle2"></div>

효과는 다음과 같습니다.

<style>
    #triangle3 {        width: 0;        border-top: 60px solid transparent;        border-right: 100px solid transparent;        border-bottom: 80px solid red;
    }</style><div id="triangle3"></div>

효과는 다음과 같습니다. 표시됨:

<style>
    #triangle4 {        width: 0;        border-left: 50px solid transparent;        border-right: 50px solid transparent;        border-bottom: 100px solid red;
    }</style><div id="triangle4"></div>

효과는 그림과 같습니다.

하트 모양 그리기

<style>
    #heart {        float: left;        width: 100px;        height: 90px;        position: relative;
    }    #heart:before,#heart:after {        position: absolute;        top: 0;        content: &#39;&#39;;        width: 50px;        height: 80px;        background: red;        border-radius: 25px 25px 0 0;
    }    #heart:before {        left: 14px;        transform: rotate(-45deg);
    }    #heart:after {        left: 36px;        transform: rotate(45deg);
    }</style><div id="heart"></div>

효과는 그림과 같습니다.

화살표 그리기

<style>
    #arrow {        margin-top: 105px;        float: left;        width: 0;        border-left: 30px solid transparent;        border-right: 30px solid transparent;        border-top: 60px solid red;        position: relative;
    }    #arrow:before,#arrow:after {        position: absolute;        content: &#39;&#39;;
    }    #arrow:before {        border-left: 30px solid transparent;        border-right: 30px solid transparent;        border-top: 20px solid #fff;        left: -30px;        top: -61px;
    }    #arrow:after {        height: 120px;        border-left: 2px solid red;        border-right: 2px solid red;        left: -2px;        top: -161px;
    }</style><div id="arrow"></div>

The 효과는 그림과 같습니다:

다섯개의 별을 그립니다

<style>
    #star-five {        margin: 75px 0 55px 0;        float: left;        width: 0;        height: 0;        border-top: 66px solid red;        border-left: 100px solid transparent;        border-right: 100px solid transparent;        position: relative;
    }    #star-five:before,#star-five:after {        position: absolute;        content: &#39;&#39;;        border-top: 66px solid red;        border-left: 100px solid transparent;        border-right: 100px solid transparent;        top: -66px;        left: -100px;
    }    #star-five:before {        transform: rotate(-72deg);
    }    #star-five:after {        transform: rotate(72deg);
    }</style><div id="star-five"></div>

효과는 그림과 같습니다:

버블 상자/프롬프트 상자 그리기

<style>
    #prompt {        float: left;        width: 200px;        height: 100px;        margin: 20px 0 40px;        border-radius: 20px;        background: #669;        position: relative;
    }    #prompt:after {        position: absolute;        content: "";        width: 50px;        height: 120px;        border: 0 solid transparent;        border-right: 30px solid #669;        border-radius: 0 0 50px 0;        top: 0;        left: 0;
    }</style><div id="prompt"></div>

효과는 다음과 같습니다. 표시 :

풍선을 끄는 효과는 다음과 같습니다. HTML 마크업 언어: 요소가 표시되는 방식을 정의합니다. CSS는 웹 디자인 분야의 획기적인 발전입니다. 작은 스타일을 수정하여 이와 관련된 모든 페이지 요소를 업데이트하는 데 사용할 수 있습니다. 위에 그려진 작은 그래픽을 보세요. 놀랍지 않나요? 이 튜토리얼은 매우 간단하며 초보자가 배우기에 적합합니다.

관련 튜토리얼:

CSS로 텍스트 색상 그라데이션을 구현하는 방법의 예

CSS의 세부 사항에 대한 자세한 설명

웹 페이지 로딩 중 애니메이션 효과를 구현하는 CSS 및 JS의 예

방법 CSS를 사용하여 구현하려면 원형 모션 볼의 예

CSS의 선택기 사용 요약

위 내용은 CSS3 간단한 그래픽 그리기 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!