如何倾斜和重叠CSS中的选项卡？ [复制]

【问题标题】：how to slant and overlap a tab in Css? [duplicate]如何倾斜和重叠CSS中的选项卡？ [复制]
【发布时间】：2020-06-13 13:35:12
【问题描述】：

如何倾斜标签块的侧面我想让它像一个崇高的标签

.tab li.tile {
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
  height: 30px;
  overflow: hidden;
  border-bottom: none;
  border-top: solid 0.5px #636363;
  border-right: solid 0.5px #636363;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 0.8em;
  align-items: center;
  margin: 0;
  padding: 0;
  color: inherit
}

【问题讨论】：

我只使用了 DOM

标签： css tabs box

【解决方案1】：

你可以这样做：

$('.tile').prepend('<div class="tr"></div>')
               .prepend('<div class="tl"></div>')

.tile {
    position: relative;
    margin: 10px;
    width: 200px;
    height: 15px;
    padding: 20px;
    background-color: #ccc;
    text-align: center;
}

.tile .tl, .tile .tr,
.tile .bl, .tile .br {
    width: 0; 
    height: 0;
    position: absolute;        
}

.tile .tl {
    top: 0;
    left: 0;
    border-top: 60px solid white; 
    border-right: 20px solid transparent;
}
.tile .tr {
    top: 0;
    right: 0;
    border-top: 60px solid white; 
    border-left: 20px solid transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tile">
    Hello world!
</div>

【讨论】：