如何使用 CSS 创建一个带有轮廓的直"beveled"角(或两个)？

Question

与这些类似，但有一个单独的边框。我之前问过这个问题，但没有意识到除了使用线性梯度之外还有其他方法。

示例：https://i.stack.imgur.com/h5rZE.png

Answer 1

它不是纯粹的 CSS（可能不完全是你要找的），但你可以先做一个更大的元素，只形成边框，然后有一个较小的同级元素，然后有一个带有偏移量的较小同级元素：

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

然后是 CSS：

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

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

Answer 2

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

带有 css 的斜面边框

.HTML

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

.CSS

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