使用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>