How to create a image frame by css?

Question

I want to try a design by CSS3 like a picture frame (like as following picture).

I have tried following :

.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>

But I can not do that. Please Help me. Thanks advance.

@AponAhmed: Oh I see, have a look at the approach used in this thread - http://stackoverflow.com/questions/30203578/create-box-with-diagonal-edge/30206543#30206543 (using linear gradients for the arrow like area). — Harry, Sep 22 '15 at 09:08

score 3 · Accepted Answer · edited May 23 '17 at 12:13

If your images are the same size, you could use pseudo elements with borders. this will mean that you need to make the border width + height to be the height of your image.

DEMO:

.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>

You can also use gradients to create this kind of shape (suggested by 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>

How to create a image frame by css?

1 Answers1