如何使用 CSS 创建一个带有轮廓的直“斜角”角（或两个）？答案

【问题标题】：How can I create a straight "beveled" corner (or two) with an outline using CSS?如何使用 CSS 创建一个带有轮廓的直“斜角”角（或两个）？
【发布时间】：2015-03-08 00:49:12
【问题描述】：

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

示例：http://i.imgur.com/TqVR67J.png

【问题讨论】：

标签： css border outline

【解决方案1】：

它不是纯 CSS（可能不完全是您正在寻找的东西），但您可以先做一个更大的元素来形成边框，然后再有一个较小的同级元素，然后偏移：

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

然后是css：

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

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

【讨论】：

【解决方案2】：

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

Beveled border with 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;
}

【讨论】：