CSSの枠線の枠線の追加ボックスの影

Question

矢印と矢印の枠線を持つツールチップがありますが、どのようにツールチップのボックスの影を得るには矢印が必要ですか？

クロスブラウザソリューションが必要です。私はCSSフィルタを使用することはできません。

.tooltip { 
 
    position: absolute; 
 
} 
 

 
.arrow_box { 
 
    position: relative; 
 
    background-color: #fff; 
 
    border: 1px solid lightgrey; 
 
    border-radius: 2px; 
 
    padding: 12px; 
 
    box-shadow: 1px 1.5px 4px 0px rgba(170, 174, 181, 0.45); 
 
    -webkit-transform: translateX(6px); 
 
      transform: translateX(6px); 
 
} 
 

 
.arrow_box:after, .arrow_box:before { 
 
    right: 100%; 
 
    top: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 

 
.arrow_box:after { 
 
    border-color: rgba(255, 255, 255, 0); 
 
    border-right-color: #fff; 
 
    border-width: 6px; 
 
    margin-top: -6px; 
 
} 
 

 
.arrow_box:before { 
 
    border-color: rgba(211, 211, 211, 0); 
 
    border-right-color: #d3d3d3; 
 
    border-width: 7px; 
 
    margin-top: -7px; 
 
}

<div class="tooltip"> 
 
<div class="arrow_box"> 
 
    <p>tooltip</p> 
 
</div> 
 
</div>

Answer 1

1は、ここに掲載のような問題の解決策は、解決することができます。 https://codepen.io/ryanmcnz/pen/JDLhu

基本的には：
1.（後::）の正方形を作成し、回転させますボックスシャドウを追加します。
2.バルーンの内部にキャストされたボックスの影と重なる2番目の四角形（:: before）を作成します。

body { 
 
    background-color: #fff; 
 
} 
 

 
.triangle { 
 
    position: relative; 
 
    margin: 3em; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
    background: #fff; 
 
    border: 1px solid #fafafa; 
 
    box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4); 
 
} 
 
.triangle::after{ 
 
    z-index: -10; 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: 0; 
 
    bottom: 0; 
 
    top: calc(50% - 5px); 
 
    left:0; 
 
    box-sizing: border-box; 
 
    
 
    border: 5px solid #fff; 
 
    border-color: transparent transparent #fff #fff; 
 
    
 
    transform-origin: 0 0; 
 
    transform: rotate(45deg); 
 
    
 
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4); 
 
    } 
 
.triangle::before{ 
 
    z-index: 10; 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: 0; 
 
    bottom: 0; 
 
    top: calc(50% - 5px); 
 
    left:0; 
 
    box-sizing: border-box; 
 
    
 
    border: 5px solid black; 
 
    border-color: transparent transparent #fff #fff; 
 
    
 
    transform-origin: 0 0; 
 
    transform: rotate(45deg); 
 
    }

<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>