html - CSS:对 Angular 线边框和 z 索引重叠

Question

我有需要对 Angular 边框的选项卡，我试图避免制作这些边框图像。我已经按照我想要的边框外观完成了所有 css 。这是图像，下面我将提供我的代码。

当我添加 left: -20px 时，会发生以下情况:

我提供了选项卡的代码，正如您所看到的，z-index 有点棘手。知道如何改变它以使其工作吗？

#recurring {
  display: flex;
  margin-bottom: 0 !important;
  width: 100%;
}

#recurring.fields .field {
  padding: 0;
}

#recurring.fields .field label {
  line-height: 25px;
  display: block;
  background: #F8F7F6;
  text-transform: uppercase;
  box-sizing: border-box;
  padding: 10px 45px;
  color: #1F1B18;
  text-align: center;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-weight: bold;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 1px;
  white-space: normal;
  position: relative;
}

#recurring.fields .field {
  background-color: #DAD7D4;
  width: 192px;
  height: 46px;
  padding-top: 1px;
  position: relative;
  float: left;
}

#recurring.fields .field::before,
#recurring.fields .field::after {
  content: '';
  position: absolute;
  top: 0;
  border-top: 48px solid #DAD7D4;
  width: 0;
  z-index: 1;
}

#recurring.fields .field::before {
  border-right: 24px solid transparent;
  left: 0;
}

#recurring.fields .field::after {
  border-left: 24px solid transparent;
  right: 0;
}

div.inside {
  width: 100%;
  height: 100%;
  position: relative;
}

div.inside::before,
div.inside::after {
  content: '';
  position: absolute;
  top: -1px;
  border-top: 47px solid #fff;
  width: 0;
  z-index: 2;
}

div.inside::before {
  border-right: 23px solid transparent;
  left: 0;
}

div.inside::after {
  border-left: 23px solid transparent;
  right: 0;
}

#recurring.fields .field input:checked + label {
  background: #fff;
  border-bottom: 0;
  color: #3f3834;
}

#recurring.fields .field input:checked + label::after {
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -1px;
  background-color: #fff;
}

#recurring.fields .field input {
  display: none;
}


// Moving monthly under one-time
#recurring.fields .field.monthly {
  // left: -20px;
}

<div id="recurring" class="two fields">
	<div class="field single">
		<div class="inside">
			<input type="radio" id="recurring-false" name="recurring" value="false" checked="checked">
			<label for="recurring-false">
				One-Time
			</label>
		</div>
	</div>
	<div class="field monthly">
		<div class="inside">
			<input type="radio" id="recurring-true" name="recurring" value="true">
			<label for="recurring-true">
				Monthly
			</label>
		</div>
	</div>
	<div class="bottom-border"></div>
</div>

Answer 1

我会使用倾斜变换而不是边框​​技巧来实现这一点。

这里只是相关代码:

.tabs {
  display:flex;
  margin:20px;
  padding:0 10px;
}
.tabs > * {
  padding:10px 40px;
  border-bottom:1px solid grey;
  position:relative;
  z-index:0;
  font-size:25px;
  margin:0 -10px;
}
.tabs > *:before,
.tabs > *:after {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:0;
  width:50%;
  border-top:1px solid grey;
  border-left:1px solid grey;
  transform-origin:bottom right;
  transform:skewX(-20deg);
  background:#f2f2f2;
}
.tabs > *:after {
  transform:scaleX(-1) skewX(-20deg) ;
}

.tabs > .active {
   border-bottom:0;
   z-index:1;
}
.tabs > .active:before,
.tabs > .active:after{
  background:none;
   background:#fff;
}

<div class="tabs">
  <div class="active">Tab1</div>
  <div >Tab2</div>
</div>

<div class="tabs">
  <div >Tab1</div>
  <div class="active">Tab2</div>
</div>