화살표와 테두리가있는 CSS 전용 툴팁
팀 마샬
스타일
.Tooltip {
position: absolute;
z-index:999;
width:200px;
height:57px;
padding:20px;
font-family: "Comic Sans MS", cursive;
font-weight:bold;
font-size:14px;
color:rgba(21,139,204,1);
text-align:justify;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
-webkit-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
-moz-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
background:#dbf3ff;
}
.Tooltip .ArrowWrap {
position:absolute;
margin-top:77px;
margin-left:81px;
height:18px;
width:37px;
overflow:hidden;
}
.Tooltip .ArrowWrap .ArrowInner {
width:25px;
height:25px;
margin:-13px 0 0 6px;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
-webkit-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
-moz-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
background:#dbf3ff;
}
JSFiddle 데모
설명
내 도구 설명 화살표가 오른쪽 이미지에 표시된 내 편집 된 Photoshop 버전과 같이 도구 설명 경계선으로 인해 차단 된 삼각형이되지 않도록하고 싶습니다.
웹 티키
상자 그림자와 유사 요소를 사용한 다른 접근 방식 :
div{
position:relative;
width:200px;
height:57px;
padding:20px;
border-radius:10px;
background:#DBF3FF;
box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
}
div:after{
content:'';
position:absolute;
left:110px; bottom:-10px;
width:20px; height:20px;
background:inherit;
transform:rotate(45deg);
box-shadow: inset -5px -5px 5px -4px rgba(21,139,204,1);
}<div></div>참고로, 브라우저 지원에 대한 특별한 요구 사항이없는 한 box-shadows 및 border-radius 에 공급 업체 접두사를 사용할 필요가 없습니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
TOP 리스트
- 1
셀레늄의 모델 대화 상자에서 텍스트를 추출하는 방법은 무엇입니까?
- 2
동적 링크 작동 방식, 사용법 및 dylib를 만드는 방법과 이유
- 3
PyCharm에서 프로젝트를 제거하는 방법은 무엇입니까?
- 4
Python : 특정 범위를 초과하면 플롯의 선 색상을 변경할 수 있습니까?
- 5
화살표와 테두리가있는 CSS 전용 툴팁
- 6
R 코드를 파이썬 코드로 변환
- 7
AWS Pinpoint에서 음성 메시지를 보낼 수 없습니다.
- 8
Unity Google Play 서비스 및 AdMob 앱을 열 때 충돌
- 9
"while" 루프가 올바르게 반복되지 않음
- 10
SQL ORA-02063-이 문제를 해결하는 방법?
- 11
YOLO의 예를 통한 미세 조정 및 전이 학습
- 12
마우스가 jQuery의 요소에서 이동을 멈출 때
- 13
라이브 카메라 미리보기에서 특정 픽셀의 색상 가져 오기-Ionic
- 14
'number'는 입력 태그에 유효한 유형이 아닙니다.-내 로컬 컴퓨터에서만
- 15
Java 컴파일러 오류 : 선택적 반환 메서드가있는 원시 유형
- 16
CORS安全性：将Access-Control-Allow-Origin设置为“ Origin on Request Header”
- 17
Samsung Galaxy Tab A 용 AOSP 빌드
- 18
ORA-12557 TNS : 프로토콜 어댑터를로드 할 수 없습니다
- 19
마우스 휠 JQuery 이벤트 핸들러에 대한 방향 가져 오기
- 20
클래스 필드에 대해 벡터의 size () 호출시 오류
- 21
check for multiple substring match in a list while iterating list
몇 마디 만하겠습니다