방금 깔끔한 CSS 트릭을 발견했습니다. 바이올린을 확인하십시오 ...
.tooltiptail {
display: block;
border-color: #ffffff #a0c7ff #ffffff #ffffff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
}
.anothertail {
background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
display: block;
height: 29px;
width: 30px;
}<div>Cool Trick:
<br />
<div class="tooltiptail"></div>
</div>
<br />
<div>How do I get this effect with only CSS?
<br />
<div class="anothertail"></div>
</div>이렇게하면 "도구 설명 꼬리"라는 작은 화살표 / 삼각형 효과가 생성됩니다. 이것은 내 마음을 날려 버린다! 이게 어떻게 작동하는지 정말 궁금 해요?!
또한이 CSS 트릭을 확장하여 다음과 같은 효과를 만드는 방법이 있습니까?
이것은 흥미로운 문제입니다. 지금은 그림자를 무시하고 CSS 만 사용하여이 작업을 수행 할 수 있습니까?
업데이트 1
나는 내 초기 질문에 대한 해결책을 찾았습니다. 여기 바이올린이 있습니다 ...
HTML
<div style="position: relative;">Cool Trick:<br />
<div class="tooltiptail"></div>
<div class="tooltiptail2"></div>
</div>
CSS
.tooltiptail {
display: block;
border-color: #ffffff #a0c7ff #ffffff #ffffff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
}
.tooltiptail2 {
display: block;
border-color: transparent #ffffff transparent transparent;
border-style: solid;
border-width: 18px;
width: 0px;
height: 0px;
position: relative;
left: 4px;
top: -38px;
}
이제 그림자를 포함하고 브라우저 간 호환이 가능한 순수한 CSS를 사용하여 위의 작은 그림을 정확히 모방하는 방법은 무엇입니까?
업데이트 2
아래 답변을 조합 한 후의 해결책은 다음과 같습니다. 여러 브라우저에서 테스트하지는 않았지만 Chrome에서는 멋지게 보입니다.
http://jsfiddle.net/UnsungHero97/MZXCj/688/
HTML
<div id="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
CSS
#toolTip {
background-color: #ffffff;
border: 1px solid #73a7f0;
width: 200px;
height: 100px;
margin-left: 32px;
position:relative;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px -1px black;
-moz-box-shadow: 0px 0px 8px -1px black;
-webkit-box-shadow: 0px 0px 8px -1px black;
}
#toolTip p {
padding:10px;
}
#tailShadow {
background-color: transparent;
width: 4px;
height: 4px;
position: absolute;
top: 16px;
left: -8px;
z-index: -10;
box-shadow: 0px 0px 8px 1px black;
-moz-box-shadow: 0px 0px 8px 1px black;
-webkit-box-shadow: 0px 0px 8px 1px black;
}
#tail1 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #73a7f0 transparent transparent;
position:absolute;
top: 8px;
left: -20px;
}
#tail2 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #ffffff transparent transparent;
position:absolute;
left: -18px;
top: 8px;
}
