使用css对角地"剪切"一个div

Question

我试图在一些空间后对角地"切割"一个div.这很难解释.它应该如下所示:

你可以看到,后面有一个蓝色的父div,里面有一个白色的div div.白色div与父div的宽度相同,但在某些像素之后(例如在100px之后)将对角线"切割".我从来没有这样的事情,但我认为它可以在使用CSS3做可能transition或rotation或者是这样的(我不知道,我不熟悉CSS3).

我搜索了对角线的div,但我只得到了类似的结果这样.不幸的是,我知道与此无关.这甚至可能吗？你能给我一些提示吗？

Answer 1

使用边框颜色显示对角线切割的div.

将它与::after仅使用一个div 结合使用.

.background {
  background-color: #5555AA;
  padding-top: 15px;
}
.content {
  position: relative;
  background-color: white;
  height: 30px;
  line-height: 30px;
  padding: 0 100px 0 200px;
  display:inline-block;
}
.content::after {
  position: absolute;
  right: -50px;
  content: "";
  border-bottom: 25px solid white;
  border-left: 25px solid white;
  border-top: 25px solid transparent;
  border-right: 25px solid transparent;
}

<div class="background">
  <div class="content">KONTAKT</div>
</div>