html - 使用纯 CSS 创建带有插入阴影的高级鼠标悬停形状

Question

我试过创建这个 mouse over shadow对于我的头部菜单，但不幸的是我无法创造出足够令人满意的东西。我正在尝试使用 box-radius 和 box-shadow(插图)来创建正确的形状和阴影。

这是我得到的:

background: tomato;
width: 100px;
height: 50px;
border-bottom-right-radius: 45px;
border-bottom-left-radius: 45px;

-webkit-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.75);

我可以使用其他一些命令吗？或者，我可能被迫使用图像？在那种情况下，是否可以使用 CSS sprites 根据文本的长度动态更改同一图像的宽度？为此，我看过 sprite 图片，看起来像这样 CSS sprite images example但是我自己从来没有使用过这种技术，因为我找不到它的“操作方法”指南。也许你可以给我一些好的链接或仔细解释一下？

谢谢大家!

Answer 1

也许你可以使用这种技术，并且在元素后面只有一个红色背景？ (并将缩进放在最上面)

http://codepen.io/Paulie-D/pen/LawCb

(里面的javascript只是提供demo点击) (我没有做过那个代码，只是知道而已。)

<nav role='navigation'>
  <ul>
    <li><a class="current" href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  

CSS:

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul, li {
  padding: 0;
  list-style: none;
}

ul {
  text-align: center;
  margin-top:15px;
}

li {
  display: inline-block;
  background-color: red;
  font-size:0;
  position: relative;
}

a {
  display: block;
  text-decoration: none;
  font-size:1rem;
  color:white;
  padding: 1rem 2rem;
  position: relative;
}

li:before,
li:after {
  position: absolute;
  content:"";
  top:100%;
  width:calc(50% - 12px); /* allows to width of triangle*/
  height:12px;
  background-color: red;
}

li:before{
  left:0;
}

li:after {
  right:0;
}

a:before {
  position: absolute;
  content:"";
  z-index:-1; /* hide behind link */
  border:12px solid red;
  top:100%;
  left:50%;
  transform:translate(-50%, -50%); /* center the pseudo element and only show bottom half*/
}

a.current:before {
    border-bottom-color:transparent; /* our triangle */
}