如何在Css中倾斜和重叠一个标签？[重复]

Question

这个问题在这里已经有了答案:

响应式CSS梯形 (2个答案)

封闭 9天前.

如何倾斜的标签瓷砖的一侧，我想让它像一个崇高的标签。

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

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