Question

我已使用“变换旋转”自定义了“物化”选项卡，以得到类似于梯形的形状。按需获取选项卡，但问题是选项卡的形状正在影响其中的文本之类的元素。如果文本位于选项卡类之外，则不能选择绝对定位的文本。

需要使制表符的形状保持为梯形而不影响其中的文本。感谢您的帮助。 `

  .tabs .tab.pn-tab {
  border: 1px solid #e6e6e6;
  -webkit-transform: perspective(100px) rotateX(30deg);
  -moz-transform: perspective(100px) rotateX(30deg);
  background-color: #f2f2f2;
  color: #5a5a5a!important;
  text-transform: none!important;
}

.pn-tab a {
  color: #333333 !important;
}

.pn-tab .active {
  background-image: linear-gradient(-180deg, #767676 0%, #333333 100%);
  z-index: 999!important;
  color: #ffffff!important;
}

.pn-tabs .indicator {
  height: 0px!important;
}

<div class="row">
  <div class="col s12">
    <ul class="tabs  pn-tabs  ">
      <li class="tab pn-tab col s3"><a href="#inbox">By District Zone</a></li>
      <li class="tab pn-tab col s3"><a class="active" href="#unread">Equipment Type
                  </a></li>
      <!--<li class = "tab col s3 disabled"><a href = "#outbox">
                  Outbox (Disabled)</a></li>
               <li class = "tab col s3"><a href = "#sent">Sent</a></li>-->
    </ul>
  </div>

  <div id="inbox" class="col s12">Inbox</div>
  <div id="unread" class="col s12">Unread</div>

</div>

`

自定义Materialise标签形状为梯形而不影响其中的文本

0 个答案: