使用 CSS 的角附近的边框宽度不均匀

Question

我的网站图像有一个边框形状，我需要将其转换为 css。现在，我将边框保存为图像并使用该图像在我的图像周围制作边框。但是，我想知道是否可以做同样的工作，但使用普通 CSS.

边框形状如下图：

正如你所看到的，边框宽度并不完全相同，因为它在左上角和右下角附近变得更粗（旋转了一点）。这甚至可能与 CSS 相关吗？我知道您可以设置不同边的宽度，但这不会产生与上图相同的结果。

Answer 1

这里有一个 hacky 方法来近似使用 CSS:

.box {
  margin:0 40px;
  width:300px;
  height:200px;
  border:7px solid;
  border-radius:30px;
  transform:skew(20deg);
  background:
    linear-gradient(to top right,transparent 47%,#000 50%) top/100% 20px,
    linear-gradient(to top right,transparent 47%,#000 50%) right/20px 100%,
    radial-gradient(circle at bottom left, transparent 50%,#000 52%) top right/57px 57px,  
    
    linear-gradient(to bottom left,transparent 47%,#000 50%) bottom/100% 20px,
    linear-gradient(to bottom left,transparent 47%,#000 50%) left/20px 100%,
    radial-gradient(circle at top right, transparent 50%,#000 52%) bottom left/57px 57px;
    
  background-repeat:no-repeat;
}

<div class="box">

</div>

也喜欢这个：

.box {
  margin:0 40px;
  width:300px;
  height:200px;
  border:7px solid;
  border-radius:30px;
  transform:skew(20deg);
  background:
    linear-gradient(to top right,transparent 47%,#000 50%) top/100% 20px,
    radial-gradient(circle at bottom left, transparent 50%,#000 52%) calc(100% + 15px) 0/57px 57px,
    
    linear-gradient(to bottom left,transparent 47%,#000 50%) bottom/100% 20px,
    radial-gradient(circle at top right, transparent 50%,#000 52%) -15px 100%/57px 57px;
    
  background-repeat:no-repeat;
}

<div class="box">

</div>

使用 CSS 的角附近的边框宽度不均匀

Uneven border width near corners using CSS

css

css-shapes