화살표와 테두리가있는 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
ImageJ-히스토그램 빈을 변경할 때 최대, 최소 값이 변경되는 이유는 무엇입니까?
- 2
상황에 맞는 메뉴 색상
- 3
Excel : 합계가 N보다 크거나 같은 상위 값 찾기
- 4
Oracle VirtualBox-설치를 위해 게스트를 부팅 할 때 호스트 시스템이 충돌 함
- 5
ExecuteNonQuery- 연결 속성이 초기화되지 않았습니다.
- 6
Cassandra에서 버전이 지정된 계층의 효율적인 모델링
- 7
원-사각형 충돌의 충돌 측면을 찾는 문제
- 8
Matlab의 반복 Sortino 비율
- 9
Apache POI를 사용하여 xlsx를 읽는 동안 주 스레드의 NoSuchMethodError
- 10
Android에서 Drawable을 int로 또는 그 반대로 변환하는 방법
- 11
어떻게 같은 CustomInfoWindow 다른 이벤트를 할 수 있습니다
- 12
openCV python을 사용하여 텍스트 문서에서 워터 마크를 제거하는 방법은 무엇입니까?
- 13
JQuery datepicker 기능이 인식되지 않거나 새 프로젝트에서 작동하지 않음
- 14
PyCharm에서 프로젝트를 제거하는 방법은 무엇입니까?
- 15
regedit에서 방금 내 보낸 Windows 레지스트리 가져 오기 문제
- 16
C ++ VSCode에서 같은 줄에 중괄호 서식 지정
- 17
Python 사전을 사용하는 동안 "ValueError : could not convert string to float :"발생
- 18
자바 스크립트로 duolingo 형 문장 연습을 개발 중입니다. 구현했지만 더 개선이 필요합니다
- 19
react-redux 저장소의 상태 변수는 console.log 후에 정의되지 않습니까?
- 20
cURL 명령은 git bash에서는 작동하지만 cmd 및 powershell에서는 작동하지 않습니다.
- 21
JavaFX : TilePane을 중앙에 배치하고 TilePane 자식을 왼쪽에서 오른쪽으로 배치하는 방법은 무엇입니까?
몇 마디 만하겠습니다