带边框的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

你的问题的解决可以解决的，就像贴在一个位置： https://codepen.io/ryanmcnz/pen/JDLhu

基本上是：
1.创建一个正方形（::之后），旋转它并添加框阴影。
2.创建第二个正方形（::之前），它与气球内部投射的方块阴影重叠。

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>