일반적인 그래픽을 그리기 위한 CSS3의 새로운 기능 및 방법 소개

서문: 최근 나만의 웹페이지를 만들 예정입니다. 디자인 초안에 내비게이션을 직사각형으로 디자인할 예정인데, 일부 아바타를 포함하여 호버 스타일로 표시되는 직사각형도 있습니다. , 등. 원을 그리는 것 외에도 다른 모양을 진지하게 그려본 적이 없습니다. 오늘은 우리가 흔히 볼 수 있는 몇 가지 모양을 그려 보겠습니다.

그 전에 의사 요소가 무엇인지 이해해야 합니다(이와는 달리 의사 클래스 라는 또 다른 개념이 있는데 둘은 혼동하기 쉽습니다). 이 개념 없이는 그래픽을 그릴 수 없습니다. .

a) 의사 요소: 콘텐츠 요소 앞뒤에 추가 요소를 삽입하는 데 사용됩니다. 의사 요소라고 불리는 이유는 문서 내에서 전혀 생성되지 않고 외부에서만 볼 수 있기 때문입니다. : F12를 하면 오른쪽 코드박스에 보이시나요?

여기서 사용된 두 개의 의사 요소 ①요소 앞:before ②요소 뒤:after

1) Circle, no If 필요하다면 삼각형을 보자

/* CSS */
.sanjiao {
        width: 0px;
        height: 0px;
        margin: 30px auto;
        position: relative;
        border: 100px solid transparent;
        border-bottom: 100px solid #3C98D1;/*这里的100px 就是三角形在竖直方向上高度 也就是三角形的高*/
        /*border-left: 100px solid #96D1DF;/* 还可以写不同方向上的三角形 */
        border-right: 100px solid #5E5E5E;
        border-top: 100px solid #3C98D1;*/
    }


/* HTML */<p class="sanjiao"></p>

2) 원기둥

/* CSS */
.yuanzhu {
       position: relative;
       height: 200px;
       width: 50px;
       background: #5E5E5E;
       margin: 30px auto;
       z-index: 999 /* 这个层叠顺序要设置下 不然看到的圆柱顶部不美观 看着就不想圆柱了 */
    }
.yuanzhu:before {
				　　　　position: absolute;
				　　　　top: -10px;
				　　　　content: "";
				　　　　width: 50px;
				　　　　height: 20px;
				　　　　border-radius: 50%;
				　　　　background: #A8A8A8;
				　　　　z-index: 99
			　　}
.yuanzhu:after {
				　　　　position: absolute;
				　　　　bottom: -10px;
				　　　　content: "";
				　　　　width: 50px;
				　　　　height: 20px;
				　　　　border-radius: 50%;
				　　　　background: #5E5E5E;
				　　　　z-index: 9
			　　}

/* HTML */
<div class="yuanzhu"></div>

3) Pentacle

Pentagram 그리기 , 먼저 스타일의 "deg" 뒤에 브라우저의 여러 개인 접두어가 회전 각도를 나타낸다는 것을 알아야 합니다. 예를 들어 "45deg"는 시계 방향 45도 회전을 나타내고 음수는 시계 반대 방향을 나타냅니다.

rotate는 transform의 속성 중 하나로 2차원 회전, 즉 2차원 회전을 나타내는 것도 3개 있습니다. -차원 회전, 변형에는 그 밖에도 여러 가지 기능이 있습니다. 잘 사용하면 생성되는 특수 효과가 상당히 고품질입니다.

으으

오각별을 그릴 때는 꼭 설정하세요. content: ""; 그렇지 않으면 의사 클래스 요소가 표시하는 스타일을 볼 수 없습니다. 두 의사 클래스 요소는 모두 절대 위치 지정으로 설정되어야 합니다. 상위 요소는 상대 요소로 설정됩니다.

4) 채팅 상자

/* CSS */
.wujiaox {
         width: 0px;
         height: 0px;
         position: relative;
         margin: 30px auto;
         border: 100px solid transparent;
         border-bottom: 70px solid #5E5E5E;
         -webkit-transform: rotate(35deg);/* Safari和Chrome */
         -moz-transform: rotate(35deg);/* Firefox */
　　　　　-ms-transform: rotate(35deg);/* IE 9 */
　　　　　-o-transform: rotate(35deg); /* Opera */
　　}
　　.wujiaox:after {
				　　　　　　content: "";
				　　　　　　width: 0px;
				　　　　　　height: 0px;
				　　　　　　display: block;
				　　　　　　border-right: 100px solid transparent;
				　　　　　　border-bottom: 70px solid #5E5E5E;
				　　　　　　border-left: 100px solid transparent;
				　　　　　　position: absolute;
				　　　　　　top: 3px;
				　　　　　　left: -105px;
				　　　　　　-webkit-transform: rotate(-70deg);
				　　　　　　-moz-transform: rotate(-70deg);
				　　　　　　-ms-transform: rotate(-70deg);
				　　　　　　-o-transform: rotate(-70deg);
			　　　}

　　.wujiaox:before {
				　　　　　　content: "";
				　　　　　　width: 0;
				　　　　　　height: 0;
				　　　　　　border-bottom: 80px solid #5E5E5E;
				　　　　　　border-left: 30px solid transparent;
				　　　　　　border-right: 30px solid transparent;
				　　　　　　position: absolute;
				　　　　　　top: -45px;
				　　　　　　left: -65px;
				　　　　　　-webkit-transform: rotate(-35deg);
				　　　　　　-moz-transform: rotate(-35deg);/* 逆时针旋转35度 */
				　　　　　　-ms-transform: rotate(-35deg);
				　　　　　　-o-transform: rotate(-35deg);
			　　　　}
/* HTML */
<div class="wujiaox"></div>

5) Bagua 다이어그램은 실제로 큰 반원 + 두 개의 작은 원으로 구성됩니다

<span style="color: #000000">/* CSS */<br/>　　　　　　.chatBox {
                width: 200px;
                height: 50px;
                margin: 30px auto;
                background: #5E5E5E;
                border-radius: 5px;
                position: relative;
            }
            
            .chatBox:before {
                content: "";
                position: absolute;
                width: 0px;
                height: 0px;
                right: 100%;
                top: 15px;
                border-top: 8px solid transparent;
                border-right: 10px solid #5E5E5E;
                border-bottom: 8px solid transparent;
            }            <br/>/* HTML */<br/><p class="chatBox"></p> </span>

6) "Masonry" 그래픽

먼저 직각 사다리꼴을 그린 다음 의사 클래스 요소를 통해 그 아래에 삼각형을 그립니다.

/* CSS */
　　　　　　.bagua {
                width: 96px;
                height: 48px;
                background: #eee;
                margin: 30px auto;
                border-color: #000000;
                border-style: solid;
                border-radius: 100%;
                border-width: 0.5px 0.5px 50px 0.5px;
                position: relative;
            }
            
            .bagua:before {
                content: "";
                border-radius: 100%;
                background: #FFFFFF;
                position: absolute;
                top: 50%;
                left: 0px;
                border: 18px solid #000000;
                width: 12px;
                height: 12px;
            }
            
            .bagua:after {
                content: "";
                border-radius: 100%;
                background: #000000;
                position: absolute;
                top: 50%;
                left: 50%;
                border: 18px solid #eee;
                width: 12px;
                height: 12px;
            }


/* HTML */<p class="bagua"></p>

CSS3에서 그래픽에 대해 이야기하는 방법은 여러 가지가 있습니다. 이 방법은 천천히 공부해야 하는 방법이지만, 심심할 때 그리는 것은 여전히 ​​꽤 흥미롭습니다. 🎜>

위 내용은 일반적인 그래픽을 그리기 위한 CSS3의 새로운 기능 및 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!