CSS Chevron喜欢元素WITH边框和li元素后的阴影

Question

我尝试使用边框和阴影创建标签内容。

这与我尝试创建阴影的问题略有不同。此外，选项卡的整个区域应该是可点击的。基本上是li

中锚标记内的复杂div

尝试1 使用方框并旋转它，可以看到两个边框宽度。

我现在拥有的：

打开/激活标签时我希望获得的内容（仅使用CSS）：

尝试2 在每个li元素后使用右指向三角形。 将它定位在下一个li元素之前 中间的白色填充失败（可以用两个li之间的边距修复）但是找不到可能的阴影解决方案。

尝试3 在元素之后定位彩色右尖三角形 在它后面定位白色三角形并且：在下一个li元素之前。 阴影这次吓到了我。

所以基本上问题是下一个li元素的尾部和当前元素的V形阴影。

堆栈片段中的尝试演示

＆＃13;

＆＃13;

.my-tabs {
  width: 100%;
  margin: 10px 0 !important;
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 100;
  padding-top: 10px;
}

.my-tabs li a {
  padding: 15px 20px 15px 50px;
  background: #ff5050;
  display: block;
  height: 56px;
}

.my-tabs li {
  display: block;
  width: 20%;
  font-size: 1.1em;
  margin: 0;
}

.my-tabs li:last-child:after {
  border-top: 28px solid #fff;
  border-left: 28px solid transparent;
  margin-right: 0;
  border-style: solid;
  border-right: 0;
  border-bottom: 28px solid #fff;
  content: '';
  height: 0;
  float: right;
  margin-top: -56px;
  transform: none;
  width: 0;
}

.my-tabs:after {
  border-left: 40px solid #ff5050 !important;
  margin-top: 1px;
  margin-left: -2px;
}

.my-tabs li:after {
  margin-right: -7px;
  border-style: solid;
  border-width: 4px 4px 0 0;
  border-color: white;
  content: '';
  height: 43px;
  float: right;
  margin-top: -43px;
  transform-origin: center top;
  transform: rotate(45deg);
  width: 43px;
}

.my-tabs li.active:after {
  -webkit-box-shadow: 8px 0px 4px -3px #090A09;
     -moz-box-shadow: 8px 0px 4px -3px #090A09;
       -o-box-shadow: 8px 0px 4px -3px #090A09;
          box-shadow: 8px 0px 4px -3px #090A09;
}

.my-tabs li.active {
  border-bottom: 8px solid white;
}

.my-tabs li.active a {
  -webkit-box-shadow: 0px 8px 4px -3px #090A09;
     -moz-box-shadow: 0px 8px 4px -3px #090A09;
       -o-box-shadow: 0px 8px 4px -3px #090A09;
          box-shadow: 0px 8px 4px -3px #090A09;
}

＆＃13;

<ul class="my-tabs">
  <li id="gtab0" class=""><a href="javascript:void(0)">tab1</a></li>
  <li id="gtab1" class=""><a href="javascript:void(0)">tab2</a></li>
  <li id="gtab2" class="active"><a href="javascript:void(0)">tab3'</a></li>
  <li id="gtab3" class=""><a href="javascript:void(0)">tab4</a></li>
  <li id="gtab4" class=""><a href="javascript:void(0)">tab5</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是一个满足您需求的现场演示。

就在此之前，有些注意事项：

1. 您需要将文字包含在div中的箭头内，如下所示：<div>Tab 1</div>因为div隐藏了:after元素box-shadow。 （要理解这一点，请尝试打开div。
2. 您需要按降序设置z-index，因此第一个隐藏第二个，依此类推。 （我相信没有多少箭头所以我猜了最多5个）
3. 我向:hover添加了box-shadow转换，以便您可以查看如何执行此操作。

会谈结束后，这是真实的事情：

＆＃13;
＆＃13;
ul {
  list-style:none;
  padding:0;
  margin:0;
}

li {
  display:inline-block;
  background:#2980b9;
  color:#fff;
  position:relative;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,0.5);
  transition:all .3s ease;
  cursor:pointer;
}

li:after {
    content: "";
    position: absolute;
    top: 0;
    right: -14px;
    height: 26px;
    width: 26px;
    background: inherit;
    transform: translateY(6px) rotate(45deg);
    box-shadow: 2px 1px 3px 0 rgba(0,0,0,0.5);
    transition:all .3s ease;
}

li:nth-child(1) {
  z-index:5;
}

li:nth-child(2) {
  z-index:4;
}

li:nth-child(3) {
  z-index:3;
}

li:nth-child(4) {
  z-index:2;
}

li:nth-child(5) {
  z-index:1;
}

li:hover {
  box-shadow: 0 2px 1px 0 rgba(0,0,0,0.3);
}

li:before:hover {
  box-shadow: 2px 1px 1px 0 rgba(0,0,0,0.3);
}

li.active {
  background:#c0392b;
}

li div {
  background:inherit;
  padding:10px 20px;
  position:relative;
  z-index:1;
}
＆＃13;
<ul>
  <li><div>Tab 1</div></li>
  <li class="active"><div>Tab 2</div></li>
</ul>
＆＃13;
＆＃13;
＆＃13;

http://jsbin.com/fedepe

<强>更新 创建此形状的另一个选项是使用SVG。

请注意，这是一个快速而肮脏的解决方案。使用svg，您无法说出＆＃34;我无法做到这一点＆＃34;。只需使用此代码，使用它，直到您获得所需的确切结果。

1. 我使用use（info）代码，因此您无需为每个项目复制许多（svg）代码。
2. 我使用filter:drop-shadow作为影子（显然，info）。
3. 您可以使用Adobe Illustrator或类似的应用来编辑此形状。
＆＃13;
＆＃13;
* {
  color:#fff;
}

ul {
  list-style:none;
  padding:0;
  margin:0;
}

li {
  position: relative;
  padding: 10px 50px 10px 25px;
  float: left;
}

svg {
  position:absolute;
  left:0;
  top:0;
  height:100%;
  z-index:-1;
  -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5)); 
  filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

use.reg {
  fill:red;
}

use.active {
  fill: blue;
}

.hidden {
  display:none;
}

li:first-child {
  z-index:1;
}
＆＃13;
<svg class="hidden" xmlns="http://www.w3.org/2000/svg" width="148.978px" height="41.791px" viewBox="0.522 375.104 148.978 41.791">
<defs>
<g id="aa" transform="translate(0.000000,240.000000) scale(0.100000,-0.100000)">
	<path d="M5.225-1766.523c0-2.09,81.318-2.432,590.644-2.432h590.82c0,0,298.311,205.298,298.311,209.653
		c0,4.351-292.207,204.253-292.207,205.645c0,2.266-74.014,2.612-593.789,2.612c-451.167,0-593.779-0.522-593.779-2.09"/>
</g>
</defs>
</svg>
<ul>
  <li>
    Item 1
    <svg viewBox="0.522 375.104 148.978 41.791">
       <use class="reg" xlink:href="#aa"></use>
    </svg>
  </li>
  <li>
    Item 2
    <svg viewBox="0.522 375.104 148.978 41.791">
       <use class="active" xlink:href="#aa"></use>
    </svg>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

http://jsbin.com/texasu

Answer 2

如果您有时间花钱，可以使用背景线性渐变进行转发，并将rgba颜色悬停在单个纹理上：demo

以下代码段示例：

.active {
  background: linear-gradient(-310deg, transparent 0.75em, rgba(0, 100, 255, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 255, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%
}

ul {
  background: url(http://lorempixel.com/500/52/abstract/4);
  overflow: hidden;
  border-bottom:3px solid transparent;
  padding:0 0 3px 0;
  margin:1em;
  background-clip:content-box;
}
ul:before {
  content:'';
  height:1.9em;
  display:inline-block;
  border-right:solid white;
  position:relative;
  vertical-align:top;
}


li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  min-width: 70px;
  padding: 0.25em 2em 0.25em 1.5em;
  border: 2px solid white;
  border-right: none;
  border-left: none;
}

li:before {
  content: '';
  padding: 0.7em;
  margin: -0.25em -2.75em -0.5em 2em;
  border: solid white;
  border-left: none;
  border-bottom: none;
  float: right;
  transform: rotate(45deg);
  border-radius: 2px;
  /* ? */
}

li:first-of-type {
  margin-left: -1em;
}

.active {
  background: linear-gradient(-310deg, transparent 0.75em, rgba(0, 100, 255, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 255, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%;
  box-shadow:0 2px 2px black;
}

.active:before {
  background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 255, 0.5) 56%);
  box-shadow:3px 0px 2px black;
}

li:last-of-type {
  background: linear-gradient(-310deg,transparent 0.75em,  rgba(200, 0, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(200, 0, 0, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%
}

li:last-of-type:before {
  background: linear-gradient(45deg, transparent 56%, rgba(200, 0, 0, 0.5) 56%)
}

li:hover {
  background: linear-gradient(-310deg,transparent 0.75em,  rgba(0, 100, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 0, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%;
    box-shadow:0px 2px 2px black;
}

li:hover:before {
  background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 0, 0.5) 56%);
    box-shadow:3px 0px 2px black;
}
a {
  color:#12374B;
  font-weight:bold;
  text-shadow:0 0 1px white;
  font-variant:small-caps;
}
body {
  background:#777;
}

<ul>
  <li class="active"><a href="">Qualify</a></li><li>
  <a href="">Develop</a></li><li>
  <a href="">Propose</a></li><li class="active">
  <a href="">Qualify</a></li><li>
  <a href="">Close</a></li>
</ul>

使用nav + a

nav {
  background: url(http://lorempixel.com/500/52/abstract/4);
  overflow: hidden;
  border-bottom:3px solid transparent;
  padding:0 0 3px 0;
  margin:1em;
  background-clip:content-box;
  white-space:nowrap; /* keep it on a single line */
}
nav:before {
  content:'';
  height:1.9em;
  display:inline-block;
  border-right:solid white;
  position:relative;
  vertical-align:top;
}


a {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  min-width: 70px;
  padding: 0.25em 2em 0.25em 1.5em;
  border: 2px solid white;
  border-right: none;
  border-left: none;
}

a:before {
  content: '';
  padding: 0.7em;
  margin: -0.25em -2.75em -0.5em 2em;
  border: solid white;
  border-left: none;
  border-bottom: none;
  float: right;
  transform: rotate(45deg);
  border-radius: 2px;
  /* ? */
}

a:first-of-type {
  margin-left: -1em;
}

.active {
  background: linear-gradient(-310deg, transparent 0.75em, rgba(0, 100, 255, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 255, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%;
  box-shadow:0 2px 2px black;
}

.active:before {
  background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 255, 0.5) 56%);
  box-shadow:3px 0px 2px black;
}

a:last-of-type {
  background: linear-gradient(-310deg,transparent 0.75em,  rgba(200, 0, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(200, 0, 0, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%
}

a:last-of-type:before {
  background: linear-gradient(45deg, transparent 56%, rgba(200, 0, 0, 0.5) 56%)
}

a:hover {
  background: linear-gradient(-310deg,transparent 0.75em,  rgba(0, 100, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 0, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%;
    box-shadow:0px 2px 2px black;
}

a:hover:before {
  background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 0, 0.5) 56%);
    box-shadow:3px 0px 2px black;
}
a {
  color:#12374B;
  font-weight:bold;
  text-shadow:0 0 1px white;
  font-variant:small-caps;
}
body {
  background:#777;
}

<nav>
  <a href="" class="active">Qualify</a><!-- white space can be killed here or else where if this method is not apprpriate to your coding
  --><a href="">Develop</a><!--
  --><a href="">Propose</a><!--
  --><a href="" class="active">Qualify</a><!--
  --><a href="">Close</a>
  </nav>