html - 如何使用CSS在图像周围创建不对称边框？

Question

所以我有一张图片，我想在它周围创建一个边框。边界的每一边我都希望它的长度不同。这是我想要实现的目标(蓝色边框):

如您所见，蓝色边框的所有边都有不同的长度。我怎样才能制作这样的边框？

Answer 1

如果不在 img 周围添加几个额外的容器元素，我想不出一种方法来做到这一点。

这可能会让您接近您正在寻找的效果......

.container {
  text-align: right;
  position: relative;
  padding: 20px;
  overflow: hidden;
}

.shrinkwrap {
  float: right; /* Shrink to fit img */
  position: relative;
}

.container img {
  display: block; /* Remove bottom spacing */
}

/* Top/Right border */
.container::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 0;
  border-top: 1px solid blue;
  border-right: 1px solid blue;
}

/* Bottom/Left border */
.shrinkwrap::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  bottom: -10px;
  left: -10px;
  border-bottom: 1px solid blue;
  border-left: 1px solid blue;
}

<div class="container">
  <div class="shrinkwrap">
    <img src="https://placehold.it/300x300">
  </div> 
</div>

它应该适用于任何尺寸的图像。

如果您在 .shrinkwrap 元素上使用基于百分比的尺寸，您可以使其响应...

.container {
  text-align: right;
  position: relative;
  padding: 20px;
  overflow: hidden;
}

.shrinkwrap {
  float: right; /* Shrink to fit img */
  position: relative;
  width: 50%;
}

.container img {
  display: block; /* Remove bottom spacing */
  width: 100%;
}

/* Top/Right border */
.container::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 0;
  border-top: 1px solid blue;
  border-right: 1px solid blue;
}

/* Bottom/Left border */
.shrinkwrap::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  bottom: -10px;
  left: -10px;
  border-bottom: 1px solid blue;
  border-left: 1px solid blue;
}

<div class="container">
  <div class="shrinkwrap">
    <img src="https://placehold.it/300x300">
  </div> 
</div>