带边框的CSS箭头添加框阴影 [英] CSS arrow with border add box shadow

问题描述

我有一个箭头和箭头边框的工具提示，但我需要箭头才能得到工具提示的方框阴影，我该怎么做？

我需要一个跨浏览器的解决方案。我无法使用CSS过滤器。

.tooltip {position：absolute;}。arrow_box {position：relative; background-color：#fff; border：1px solid lightgrey; border-radius：2px;填充：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％;顶部：50％;边框：透明;内容：;身高：0;宽度：0;位置：绝对; 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 = 工具提示 > < div class =arrow_box> < p为H.工具提示< / p为H. < / div>< / div>

解决方案

你的问题的解决方案可以解决，就像这里发布的问题：
https://codepen.io/ryanmcnz/pen/JDLhu

基本上：

1.创建一个正方形（： ：之后），旋转它并添加箱子阴影。

2.创建第二个方块（:: before），它与气球内的箱子阴影重叠。

body {background-color：#fff;}。triangle {position：relative;保证金：3em;填充：1em;盒子尺寸：边框;背景：#fff; border：1px solid #fafafa; box-shadow：0px 3px 3px 0 rgba（0，0，0，0.4）;}。triangle :: after {z-index：-10;内容：;位置：绝对;宽度：0;身高：0; margin-left：0;底部：0; top：calc（50％ - 5px）;左：0;盒子尺寸：边框; border：5px solid #fff;边框颜色：透明透明#fff #fff; transform-origin：0 0;转换：旋转（45度）; box-shadow：0 3px 3px 0 rgba（0，0，0，0.4）; } .triangle :: before {z-index：10;内容：;位置：绝对;宽度：0;身高：0; margin-left：0;底部：0; top：calc（50％ - 5px）;左：0;盒子尺寸：边框;边框：5px纯黑色;边框颜色：透明透明#fff #fff; transform-origin：0 0;转换：旋转（45度）; }

< div class =triangle> This是一个CSS3三角形，带有适当的box-shadow！< / div>

I have a tooltip with arrow and arrow border, but I need the arrow to get also the box shadow of the tooltip how I can do this?

I need a cross-browser solution. I can't use CSS filter.

.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>

解决方案

The solution of your problem can be solved, like the one posted here: https://codepen.io/ryanmcnz/pen/JDLhu

Basically:
1. Create a square (::after), rotate it and add box shadow.
2. Create a second square (::before) that overlaps the box shadow casted inside the balloon.

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>

这篇关于带边框的CSS箭头添加框阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！