相关疑难解决方法(0)

我想在图像上做一个透明的箭头.此三角形应缩进半透明块并显示背景图像.

期望的输出:

.barShow {
  background-color: #000;
  opacity: 0.5;
}

.barShow:before {
  top: 0%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-top-color: #999;
  border-width: 20px;
  margin-left: -20px;
}

<div class="barShow"></div>

该透明CSS箭应该是没有颜色的透明.

这已被问到,但我需要以不同的方式.请看下面的图片,看看我尝试实现的导航栏:

问题:

• 边缘周围的阴影
• 栏内的文字/图片
• 图周围的1px实线边框会很棒

当然静态图像可以做到这一点,但我想使用其他东西.您有任何想法,如何做到这一点(尽可能多的浏览器支持)？

编辑: <nav>绝对定位

这是我到目前为止所做的

但是不可能应用边框,固定尺寸也存在问题.

    nav {
       float: left;
       position: absolute;
       background-color: #ffffff;
       top: 0;
       left: 0;
       display: inline;
       padding: 12px;
       padding-right: 0;
       width: auto;
    }

    .behind_nav {
       height: 60px;
       width: 523px;
       position: absolute;
       top: 0;
       left: 0;
       border-right: 20px solid transparent;
       border-top: 48px solid white;
    }

.behind_nav落后<nav>(惊讶,惊讶).实际上除了上面提到的阴影和边界问题外,这种方法效果很好.它也受固定值的限制,这是有问题的.<nav>适合宽度与内容(由于CMS数据/浏览器可能会有所不同)

您好,可以在矩形的中心创建一个倒圆角的三角形,就像在许多着陆页中一样.如下图所示:

我在这里找到了类似的东西,但没有倒圆角 CSS倒三角形图像叠加