代码之家 › 专栏 › 技术社区 › Cyberstaker

如何使图像用箭头填充div?[副本]

css-position css html

Cyberstaker · 技术社区 · 6 年前

我希望图像填充div中的整个空间,包括div右侧的箭头区域。我没有找到任何提示或示例来解决问题。你能帮帮我吗?

.arrow_box {
  position: relative;
  background: #88b7d5;
  width: 400px;
  height: 200px;
}
.arrow_box:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-left-color: #88b7d5;
  border-width: 15px;
  margin-top: -15px;

  z-index: -30;
}

.user-image{
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  background-position: center center;
  position: relative;

  object-fit: cover;

  z-index: 10;
}

<div class="arrow_box">
 
<img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Amazona_aestiva_-upper_body-8a_%281%29.jpg" class="user-image" />
</div>

1 回复 | 直到 6 年前

VXp Kadir BuÅ¡atliÄ 6 年前

你可以用 clip-path: polygon() :

.arrow_box {
  position: relative;
  background: #88b7d5;
  width: 400px;
  height: 200px;
  -webkit-clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
  clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
}

.user-image {
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  background-position: center center;
  position: relative;
  object-fit: cover;
  z-index: 10;
  -webkit-clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
  clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
}

<div class="arrow_box">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Amazona_aestiva_-upper_body-8a_%281%29.jpg" class="user-image" alt="">
</div>