html - 前端 : How to (properly) achieve this masking effect with css

Question

我希望这是发帖的正确位置。

我是一名全栈开发人员，过去几年一直专注于后端，所以我试图确保我以正确的方式处理这个问题，并且没有比我提出的解决方案更新的方法来做到这一点下面:

请参阅随附的屏幕截图。这是我接手的一个自由元素的主导航。在没有英雄形象的页面上这不是问题，但是在有英雄形象的地方，我需要如图所示屏蔽图像。如果您看不到它，则所选导航项下方有一个三 Angular 形，该三 Angular 形连接到延伸屏幕宽度的 2px 红线。这个三 Angular 形由相同的 2px 红线构成，如果有主图，则图像的顶部被这条红线和一些等于三 Angular 形高度的空白(约 8 像素)遮盖。

我提出的解决方案我打算让设计师为我准备一个长 png 的图形，大约 3000 x 8，唯一的透明度是三 Angular 形下面的部分。当页面加载时，我打算加载图形并使用 JS 将其绝对定位在选定的导航项下方，遮盖其下方的图像。

我的问题在 2015 年是否有更好的方法来实现这一目标 - 即剪辑路径？关于这个主题是否有很好的教程 - 我所看到的一切都是为了更精细的东西，不涉及添加的图形(即顶部的红线和白色 mask 。

效果

编辑

这是我将用来为我的低保真(2011ish)解决方案获得正确偏移的 js，细心的开发人员会注意到 wordpress 生成的类:

<script type="text/javascript">
        var x = $("#main-nav .current-menu-item a").offset().left;
        var y = $("#main-nav .current-menu-item a").offset().top;
        var w = $("#main-nav .current-menu-item a").width();
        var cx = (x + w / 2);

        //get target width and set x offset
        tw = $("#masking-selection").width()
        tx = cx - (tw/2)

        //move the masking item
        $("#masking-selection").offset({top: (y+20), left: tx })
    </script>

Answer 1

希望我理解你的问题。以下是实现您的需求的一种方法。注意:根据您的需要进行调整。

body {
  background-color: beige;
  padding: 0;
  margin: 0;
  }

ul  {
  height: 60px;
  width: 100%;
  text-align: center;
  font-size: 18px;
  background-color: white;
  border-bottom: solid 1px red;
  overflow: hidden
  padding: 0;
  margin: 0;
  
  }

li {
  display: inline-block;
  padding: 0 20px 0 20px;
  line-height: 60px;
  position:relative
  }

li.current:after, li.current:before {
  content: '\f0de';
  font-family: fontAwesome;
  position: absolute;
  font-size: 38px;
  bottom: -35.09px;
 text-align: center;
  left: 44%;
  color: beige;
  
  }

li.current:before {
  color: red;
 font-size: 43px;
 left: 42.4%;
  bottom: -35.5px;
  
  }

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
	<li>How </li>
	<li class="current">About us</li>
	<li>Contact us</li>
</ul>