html - CSS Chevron like element with border and shadows after li element

Question

我正在尝试创建带有一些边框和阴影的选项卡式内容。

这与我试图创建阴影的问题略有不同。此外，选项卡的整个区域都应该是可点击的。基本上是一个锚标签内的复杂 divli

尝试 1 使用一个方形框并以两个可见的边框宽度旋转它。

我现在拥有的：

我希望在打开/激活选项卡时获得什么（仅使用 CSS）：

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

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

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

Stack Snippets 中的尝试演示

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

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

score 2 · Accepted Answer

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

就在之前，一些注释：

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

谈话结束后，这是真实的：

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

<ul>
  <li><div>Tab 1</div></li>
  <li class="active"><div>Tab 2</div></li>
</ul>

http://jsbin.com/fedepe

更新创建此形状的另一个选项是使用SVG.

请注意，这是一个快速而肮脏的解决方案。svg你不能说“我做不到” 。只需使用此代码，使用它，直到您获得所需的确切结果。

我正在使用use( info ) 标签，因此您不需要为每个项目复制许多 (svg) 代码。
我正在使用filter:drop-shadow阴影（显然是info）。
Adobe Illustrator您可以使用类似或类似的应用程序编辑此形状。

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

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

http://jsbin.com/texasu

score 1 · Accepted Answer

如果你有时间花，你可以中继背景线性渐变和 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 {
  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>

html - CSS Chevron like element with border and shadows after li element

Stack Snippets 中的尝试演示

2 回答 2

Related

Reference