javascript - 如何通过css创建图像框架？

Question

我想尝试用CSS3做一个相框之类的设计(如下图)。

我试过以下:

.frame_box li {
  border: 1px solid #000;
  height: 200px;
  width: 150px;
  display: inline-block;
  border-radius:4px;
}

<ul class="frame_box">
  <li>
    <img src="a.jpg" alt="" />
  </li>
  <li>
    <img src="a.jpg" alt="" />
  </li>
  <li>
    <img src="a.jpg" alt="" />
  </li>
  <li>
    <img src="a.jpg" alt="" />
  </li>
  <li>
    <img src="a.jpg" alt="" />
  </li>
  <li>
    <img src="a.jpg" alt="" />
  </li>
</ul>

但我做不到。请帮我。提前致谢。

Answer 1

如果您的图像大小相同，您可以使用带边框的伪元素。这意味着您需要将边框宽度 + 高度设置为图像的高度。

演示:

.image {
  position: relative;
  height: 300px;
  width: 200px;
  background: url(http://lorempixel.com/200/300);
}
.image:before,
.image:after {
  content: "";
  position: absolute;
  top: 0;
  height: 200px;
  border: 50px solid gray;
}
.image:before {
  right: 0;
  border-left-color: transparent;
  border-right: none;
}
.image:after {
  left: 0;
  border-right-color: transparent;
  border-left: none;
}

<div class="image"></div>

您还可以使用渐变来创建这种形状(Harry's answer here 建议):

.shape {
  height: 400px;
  position: relative;
  width: 50vw;
  background: linear-gradient(225deg, #F3D56A 30px, transparent 30px), linear-gradient(45deg, #F3D56A 30px, transparent 30px), linear-gradient(135deg, #F3D56A 30px, transparent 30px), linear-gradient(315deg, #F3D56A 30px, transparent 30px);
}
.shape img {
  z-index: -1;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

<div class="shape">
  <img src="http://lorempixel.com/300/300" />
</div>