"cut" a div 对角使用 css

Question

我正在尝试 "cut" div 对角 space。这很难解释。它应该是这样的：

如您所见，后面有一个蓝色的父项 div，里面有一个白色的子项 div。白色 div 将与父 div 宽度相同，但在某些像素后（例如 100px 后）将 "cutted" 对角线。我从来没有做过这样的事情，但我认为它可以在 CSS3 中使用 transition 或 rotation 或类似的东西来完成（我不知道，我不熟悉 CSS3).

我搜索了对角线 div，但我只得到了 this 这样的结果。不幸的是，我对此一无所知。这可能吗？你能给我一些提示吗？

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>

"cut" a div 对角使用 css

"cut" a div diagonally using css

html

css

css-shapes