html - 定位偏移 div/图像

Question

我想实现这个结果(参见这个示例图片)。

首先，我尝试使用 CSS 创建部分边框(使用 div:after)。问题:我有几张不同格式的图像，但无法正常工作。因此，我尝试使用 position: relative 的背景 div 和 position: absolute 的图像。

它可以工作，但在响应模式下处理起来并不容易。我需要为包含图像的 div 设置一个 with 和一个高度，有时容器太大。

.container-image-border {
  margin-top: 40px;
  background-color: #fd9220;
  position: relative;
  width: 150px;
  height: 250px;
}

.container-image-border img {
  position: absolute;
  top: -30px;
  right: -30px;
}

<div class="container-image-border">

  <img alt="example" src="https://via.placeholder.com/150x250">

</div>

还有其他方法可以实现吗？

Answer 1

你甚至不需要包装你的 <img>带有 <div> 的元素: 使用 box-shadow会成功的:

img {
  box-shadow: -10px 10px 0 0 #fd9220;
  margin: 20px;
}

<img alt="example" src="https://via.placeholder.com/150x250">
<img alt="example" src="https://via.placeholder.com/250x150">
<img alt="example" src="https://via.placeholder.com/150x150">

使用 <div> 包装的问题就是默认是 block 级元素，宽度为100%除非另有规定。这使得很难将元素“收缩包裹”在您的 <img> 周围。元素，因为您的图片大小未定。