위 그림과 같이 화살표가있는 상자를 볼 수 있습니다. 이 화살표는 배경 사진이나 CS를 통해 실현 될 수 있습니다. 이 기사는 CSS를 통한 화살표가있는 3 개의 프롬프트 상자를 소개합니다.
1. 테두리 속성을 통과하십시오
아이디어 : 두 개의 삼각형 인 두 삼각형은 위치를 통해 테두리와 1px와 다릅니다.
2.CSS3 변환
아이디어 : 먼저 양쪽에 같은 색상의 사각형을 만든 다음 특정 각도로 회전하여 삼각형으로 만듭니다.
3. 특수 캐릭터 '♦'
생각 : 특수 캐릭터의 전반부는 유출되어 삼각형처럼 보입니다.
1. 테두리 속성 전달 :
먼저 너비와 높이가 10px의 DIV를 만들고 테두리도 10px입니다.
너비 : 10px; 높이 : 10px; 국경 : 10px 고체; 국경 색 : 빨간색 녹색 노란색 블루;
아래 그림과 같이 :
그림 중앙의 빈은 우리가 설정 한 너비와 높이입니다. 0px로 설정되면 어떻게됩니까? 아래 그림과 같이 :
현재, 우리는 왼쪽 및 하단 테두리의 색상이 배경색과 투명하거나 같은 색상으로 설정할 수 있으며, 원하는 삼각형이 나옵니다. 아래 그림과 같이 :
이제 첫 번째 그림에 영향을 미치겠습니다.
CSS :
.info {margin-top : 50px; 위치 : 상대; 너비 : 200px; 높이 : 50px; 라인 높이 : 60px; 배경 :#f6f1b3; Box-Shadow : 1px 2px 3px #e9d985; 테두리 : 1px 고체 #dace7c; Border-Radius : 4px; 텍스트 정렬 : 센터; 색상 : 빨간색; } .nav {위치 : 절대; 왼쪽 : 30px; 오버플로 : 숨겨진; 너비 : 0; 높이 : 0; 국경비 : 10px; 테두리 스타일 : 단단한 점선 점선; } .nav-border {top : -20px; 국경 색 : 투명한 투명한 투명 #dace7c 투명; } .nav-background {상단 : -19px; 국경 색 : 투명한 투명 #F6F1B3 투명; }HTML :
<div> <span> 프롬프트 메시지 </span> <div> </div> <div> </div> </div>
2. CSS3 변환
우리는 먼저 같은 색상을 가진 두 개의 인접 테두리와 0px가있는 두 개의 테두리가있는 div 상자를 만듭니다. 그림과 같이 :
삼각형 프롬프트 효과를 달성하기 위해 상자를 45도 씩 돌리십시오.
CSS :
.info {margin-top : 50px; 위치 : 상대; 너비 : 200px; 높이 : 50px; 라인 높이 : 60px; 배경 :#f6f1b3; Box-Shadow : 1px 2px 3px #e9d985; 테두리 : 1px 고체 #dace7c; Border-Radius : 4px; 텍스트 정렬 : 센터; 색상 : 빨간색; } .nav {위치 : 절대; 상단 : -8px; 왼쪽 : 30px; 오버플로 : 숨겨진; 너비 : 13px; 높이 : 13px; 배경 :#f6f1b3; 왼쪽 경계 : 1px 솔리드 #dace7c; 테두리 : 1px 고체 #dace7c; -webkit-transform : 회전 (45deg); -Moz 변환 : 회전 (45deg); -o-transform : 회전 (45deg); 변환 : 회전 (45deg); }HTML :
<div> <span> 프롬프트 메시지 </span> <div> </div> </div>
3. 특수 캐릭터 '♦'
'♦'는 특수한 캐릭터이며 캐릭터와 동일하므로 크기는 글꼴 크기를 통해 설정되어 첫 번째 그림의 효과를 달성합니다.
CSS :
.info {margin-top : 50px; 위치 : 상대; 너비 : 200px; 높이 : 50px; 라인 높이 : 60px; 배경 :#f6f1b3; Box-Shadow : 1px 2px 3px #e9d985; 테두리 : 1px 고체 #dace7c; Border-Radius : 4px; 텍스트 정렬 : 센터; 색상 : 빨간색; } .nav {위치 : 절대; 왼쪽 : 30px; 오버플로 : 숨겨진; 너비 : 24px; 높이 : 24px; 글꼴 : 일반 24px "Microsoft Yahei"; } .nav-border {top : -17px; 색상 :#dace7c; } .nav-background {상단 : -16px; 색상 :#f6f1b3; }HTML :
<div> <span> 프롬프트 메시지 </span> <div> ♦ </div> <div> ♦ </div> </div>
아래는 IE5.5+, 크롬, Firfox 및 기타 브라우저와 호환되는 데모입니다. 사용하면 자신의 프로젝트에 직접 시험을 보낼 수 있습니다.
<! doctype html> <html> <head> <head> <title> </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"> <style> div.container {위치 : 절대; 상단 : 30px; 왼쪽 : 40px; 글꼴 크기 : 9pt; 디스플레이 : 블록; 높이 : 100px; 너비 : 200px; 배경색 : 투명; *국경 : 1px Solid #666; } s {위치 : 절대; 상단 : -20px; *상단 : -22px; 왼쪽 : 20px; 디스플레이 : 블록; 높이 : 0; 너비 : 0; 글꼴 크기 : 0; 라인 높이 : 0; 국경 색 : 투명한 투명 #666 투명; 테두리 스타일 : 점선 점선 단단한 점선; 국경비 : 10px; } i {위치 : 절대; 상단 : -9px; *상단 : -9px; 왼쪽 : -10px; 디스플레이 : 블록; 높이 : 0; 너비 : 0; 글꼴 크기 : 0; 라인 높이 : 0; 국경 색 : 투명한 투명 #fff 투명; 테두리 스타일 : 점선 점선 단단한 점선; 국경비 : 10px; } .Content {테두리 : 1px Solid #666; -Moz 국경-라디우스 : 3px; -webkit-border-radius : 3px; 위치 : 절대; 배경색 : #fff; 너비 : 100%; 높이 : 100%; 패딩 : 5px; *상단 : -2px; *테두리 탑 : 1px 고체 #666; *테두리 탑 : 1px 고체 #666; *테두리 탑 : 1px Solid *Border-Left : None; *국경-오른쪽 : 없음; *높이 : 102px; Box-Shadow : 3px 3px 4px; -Moz-Box-Shadow : 3px 3px 4px; -webkit-box-shadow : 3px 3px 4px; / * IE 5.5-7 */ 필터의 경우 : progid : dximagetransform.microsoft.shadow (강도 = 4, Direction = 135, color = '#999999'); / * IE 8 */ -ms -filter : "progid : dximagetransform.microsoft.shadow (강도 = 4, Direction = 135, color = '#999999')"; } </style> </head> <body> <div> <div> <div> 안녕하세요 세계! </div> <s> <i> </i> </s> </div> </body> </html>생식 이미지 :
요약:
화살표가있는 프롬프트 상자는 사용자 상호 작용에 좋은 결과를 가져옵니다. 이 기사는 세 가지 방법을 소개합니다. @ME에 대한 다른 방법이 있다면 매우 감사 할 것입니다. 이 기사가 도움이되기를 바랍니다.