右上角倒角css,如何实现倒角CSS边角而不是圆角？

要实现倒角CSS边角，可以使用CSS3的`transform`属性和`::before`和`::after`伪元素来实现。

首先，可以为元素设置一个`position: relative;`的定位，然后使用`::before`和`::after`伪元素来创建两个倒角。

在`::before`和`::after`伪元素中，使用`transform: skew()`来将伪元素旋转一定角度，达到倒角的效果。

具体实现代码如下所示：

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

.box::before,
.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #ccc;
}

.box::before {
  transform: skew(-30deg);
}

.box::after {
  transform: skew(30deg);
}

在上面的代码中，我们为`.box`元素设置了一个相对定位，并为它创建了两个伪元素`::before`和`::after`，宽度为50%。

然后，我们通过`transform: skew()`属性将`::before`伪元素向左倾斜30度，将`::after`伪元素向右倾斜30度，实现了倒角的效果。

这样就可以实现倒角CSS边角了。