我如何才能创建一个“直”字；斜切；使用CSS的轮廓角（或两个角）？

类似于，但有单独的边界。我之前问过这个问题，但没有意识到除了使用线性渐变之外还有其他方法

示例：

它不是纯CSS（可能也不是您想要的），但您可以先创建一个较大的元素，形成边框，然后创建一个较小的同级元素，并在后面添加偏移量：

<div id="background"></div>
<div id="foreground"></div>

---

（显然，你必须为斜面添加所有的样式和额外的标签。）

看看这把小提琴。这可能会让您了解如何使用css创建它

HTML

#background{
  position: absolute;
}
#foreground{
  position: relative;
  top: 5px;
  left: 5px;
}

<div class='box'>
  <img src="http://placehold.it/350x150" />
  <img class='cart' src="http://www.rotweinelang.at/themes/wein/img/elements/smallShoppingCartIcon.png" />
</div>

.box {
  width: 350px;
  position: relative;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  right: -2px;
  border-style: solid;
  border-width: 0 40px 40px 0;
  border-color: transparent #fff transparent transparent;
}

.cart {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 1;
}