前端：如何（正确）用css实现这种掩蔽效果

Question

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

我是一个完整的堆栈开发人员，过去几年专注于后端，所以我试图确保我正在以正确的方式接近这一点，并且没有更新的方法来做到这一点然后我建议的解决方案下面：

请参阅随附的屏幕截图。这是我参与的自由项目的主要导航。没有英雄形象的页面上没有问题，但是如果有英雄，我需要屏蔽图像，如图所示。如果您看不到它，则所选的导航项下面会有一个三角形，它连接到一条扩展屏幕宽度的2px红线。这个三角形由相同的2px红线构成，如果有英雄图像，图像的顶部被这条红线遮住，一些白色空间（大约8个像素）等于三角形的高度。

我建议的解决方案 我打算让设计师为我准备一张图片，这是一个很长的png，大约3000乘8，唯一的透明度是三角形下面的部分。当页面加载时，我将加载图形并使用JS将其绝对放置在所选导航项目下方，屏蔽其下方的图像。

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

效果

修改

这是我用来获得我的lo-fi（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

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

＆＃13;

＆＃13;

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;
  
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;