Put image in the center of bottom border with CSS

Question

Everything is explained in the title of this post. I'm trying to put an PNG image in the center bottom border of a div element.

.content_block {
  border: ridge;
  border-width: 1px;
  border-color: #969696;
  height: 200px;
  width: 200px;
}
.content_block.orange {
  background-image: linear-gradient(#FBB03B, #FF9933);
}

<div class="content_block orange"></div>

Here's an image of what I'm trying to do:

I searched the net for a way to that with CSS, and border-image and stuff, but nothing worked.

Answer 1

.content-block {
  position: relative;
  width: 200px; height: 100px;
  border: 1px solid #f0f;
}
.content-block img{
  position: absolute;
  left: 50%; bottom: 0;
  width: 50px; height: 50px; margin: -25px;
}

<div class="content-block">
  <img src="http://placehold.it/50x50" alt="">
</div>

If you have a relative positioned parent, you can manipulate the position of an inner child using position:absolute;

Answer 2

To achieve the effect of it being exactly in the middle of the border, you will have to include the border with the image by inheriting it, and making it invisible. Like this, you can 'calculate' with it.

See this Fiddle for the effect. In this Fiddle, I've created a pseudo element that has a background-image of a play button.

The CSS that does the trick is this:

div::after{
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 30px;
    height: 30px;
    background-image: url('http://www.iconsdb.com/icons/preview/gray/video-play-3-xxl.png');
    background-size: cover;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    border-top: inherit;
    border-top-color: transparent;
}

I've placed it to the absolute bottom and 50% from the left. Then with the transform property, I shifted it to be centered around these points (50% from the left, and 100% from the top);

Then to make it move along with the border, I inherited only at the top, and made it invisible.