css圆角怎么实现内凹角

CSS的圆角属性是我们经常使用的样式属性，它可以将一个方形的元素变成一个圆角矩形。而实现内凹角则需要使用较为高级的技巧，接下来就来看看如何实现内凹角。

  .inner-corner {
    height: 100px;
    width: 100px;
    position: relative;
    background-color: #FFF;
    border: 3px solid #333;
  }
  .inner-corner:before {
    content: "";
    position: absolute;
    left: -6px;
    top: -6px;
    width: 20px;
    height: 20px;
    background-color: #FFF;
    border: inherit;
    border-bottom: none;
    border-right: none;
    transform: rotate(-45deg);
  }

代码解释：

• 首先，我们需要一个具有边框的盒子。
• 然后，我们在这个盒子的 before 伪元素中创建一个矩形，它的宽度和高度需要足够大，使它能够覆盖盒子的角。
• 接下来，我们用 transform 属性将这个矩形旋转 45 度，使其形成一个菱形。
• 最后，我们在矩形身上留下两个直角，这样就形成了一个内凹角。

所以，这个 inner-corner 类就可以实现内凹角了。你可以通过改变这个盒子的大小和位置来调整内凹角的大小和位置。