화살표와 dropshadow와 둥근 된 모퉁이 음성 상자입니다. 이미지 기반

Question

스타일 상자가 필요합니다. 첨부 된 스크린 샷을 참조하십시오.

• 신장과 체중이 다를 수 있습니다. 150 x 200 픽셀 일 수도 있고 600 x 150 픽셀 일 수도 있습니다.
• Internet Explorer 8은 필수입니다. 이 슬프게도 CSS3 기술을 사용할 수 없습니다. IE 7은 지원되지 않습니다.
• 음영은 오른쪽 하단입니다. 하지만 누군가가 4면 그림자에 대한 해결책을 알고 있다면 에 관심이 있으니
• 다양한 라이브러리에 대한 좋은 경험이 없으므로 JavaScript 기반 솔루션을 사용하지 않는 것이 좋습니다.
• 다양한 div의 내용을 래핑하는 대신 정리하십시오. "코드 mockoup"를 참조하십시오.
• 화살표의 위치가 다를 수 있습니다. 그것은 상단에있을 수, (예를 들어, 배송 확장) 내가 zara.com solution을 발견 등

<div class="dropdown"> 
<div class="leftTop"></div> 
<div class="rightTop"></div> 
<div class="leftBottom"></div> 
<div class="rightBottom"></div> 
<div class="arrow"></div> 
<div class="dropdownContent"> 

</div>           
</div> 

좋은 시작점을 떠났다. 그들은 such image

콘이 이미지의 일부이기 때문에 래퍼의 배경 색상은 CSS에서 변경할 수 없습니다입니다 사용할 수 있습니다. 그러나 그렇게 중요하지 않습니다.

Answer 1

CSS3 PIE을 사용하면 둥근 모서리, 그림자 및 기타 CSS3 기능을 사용할 수 있습니다. 일부 기능은 에뮬레이트하는 데 약간의 CPU가 필요하지만 버전 6부터 CSS3 호환 IE를 제공합니다.

Answer 2

예전 게시물이지만 다음의 순수 CSS3 솔루션을 언급 할 가치가 있습니다. 감안할 때 덜 CSS를 :

// Tooltip Variables 

@wcui_tt_radius: 6px; 
@wcui_tt_arrow_size: 6px; 
@wcui_tt_background: rgba(0,0,0,0.8); 
@wcui_tt_foreground: white; 
@wcui_tt_padding: 6px 10px; 
@wcui_tt_font: 13px "Helvetica Neue", Arial, Helvetica, sans-serif; 
@wcui_tt_z: 100; 
@wcui_tt_max_width: 200px; 


// Mixins 

.opacity(@opacity) { 
    opacity: @opacity/100; 
    filter: ~"alpha(opacity=@{opacity})"; 
} 

.transition(@transition) { 
    -webkit-transition: @transition; 
    -moz-transition: @transition; 
     -ms-transition: @transition; 
     -o-transition: @transition; 
      transition: @transition; 
} 

.border-radius(@radius) { 
    -webkit-border-radius: @radius; 
    -moz-border-radius: @radius; 
      border-radius: @radius; 
} 


#arrow { 
    .top(@arrowWidth: 5px, @color: black) { 
     top: 0; 
     left: 50%; 
     margin-left: -@arrowWidth; 

     border-left: @arrowWidth solid transparent; 
     border-right: @arrowWidth solid transparent; 
     border-bottom: @arrowWidth solid @color; 
    } 
    .bottom(@arrowWidth: 5px, @color: black) { 
     bottom: 0; 
     left: 50%; 
     margin-left: -@arrowWidth; 

     border-left: @arrowWidth solid transparent; 
     border-right: @arrowWidth solid transparent; 
     border-top: @arrowWidth solid @color; 
    } 
    .left(@arrowWidth: 5px, @color: black) { 
     top: 50%; 
     left: 0; 
     margin-top: -@arrowWidth; 

     border-top: @arrowWidth solid transparent; 
     border-bottom: @arrowWidth solid transparent; 
     border-right: @arrowWidth solid @color; 
    } 
    .right(@arrowWidth: 5px, @color: black) { 
     top: 50%; 
     right: 0; 
     margin-top: -@arrowWidth; 

     border-top: @arrowWidth solid transparent; 
     border-bottom: @arrowWidth solid transparent; 
     border-left: @arrowWidth solid @color; 
    } 
} 


// Tooltip Styles 
.tooltip { 
    font: @wcui_tt_font; 
    .opacity(0); 
    .transition(opacity 0.15 ease); 
    z-index: @wcui_tt_z; 
    position: absolute; 
    overflow: visible; 
    display: block; 
    visibility: visible; 

    .on { .opacity(100); } 

    .content { 
     position: relative; 
     overflow: hidden; 
     background-color: @wcui_tt_background; 
     color: @wcui_tt_foreground; 
     padding: @wcui_tt_padding; 
     .border-radius(@wcui_tt_radius); 
     max-width: @wcui_tt_max_width; 
    } 

    .arrow { 
     position: absolute; 
     width: 0; 
     height: 0; 
     margin: 0 auto; 
    } 

    &.top { 
     padding-top: @wcui_tt_arrow_size; 
     .arrow { #arrow > .top(@wcui_tt_arrow_size, @wcui_tt_background); } 
    } 
    &.bottom { 
     padding-bottom: @wcui_tt_arrow_size; 
     .arrow { #arrow > .bottom(@wcui_tt_arrow_size, @wcui_tt_background); } 
    } 
    &.left { 
     padding-left: @wcui_tt_arrow_size; 
     .arrow { #arrow > .left(@wcui_tt_arrow_size, @wcui_tt_background); } 
    } 
    &.right { 
     padding-right: @wcui_tt_arrow_size; 
     .arrow { #arrow > .right(@wcui_tt_arrow_size, @wcui_tt_background); } 
    } 
}

길어 보이지만 실제로는 그렇지 않습니다. mixins는 Less CSS 코드 전체에서 재사용됩니다. HTML 태그는 간단하다 : 모든 것은 남아

<div class="tooltip left"> 
    <div class="arrow"></div> 
    <div class="content"> 
     <p>This is a sample large tooltip.</p> 
    </div> 
</div> 

는 위치를 어떻게 든 당신이 원하는 경우 클래스는 jQuery를 같은 것을 사용 "의"가 표시 추가하는 것입니다. 결과는 다음과 같습니다.

Tooltip Sample http://f.cl.ly/items/2u2Z1H011p2R1h1D0B3N/tips.png