Border around a hexagonal background image inside a div-CodePudding

In my ReactJs project, I have a <div> which has a hexagonal background-image.

I want to add a hexagonal border around this background-image. Is it possible to do that using css?

<div         
   style={{
       backgroundImage: `url("/images/eocs/aspiration.png")`,
       width: '120%',
       height: '0',
       paddingTop: '105%',
       position: 'relative',
       marginTop: `${eoc.topPosition}`,
       marginBottom: `-${eoc.topPosition}`,
   }}
</div>

Adding a border on div applies a rectangular border on it.

Here is the background-image, my requirement is to add a border on this image just outside the black colored border.

CodePudding user response：

You could do that with drop-shadow filter property

<div ...>
  <img src="https://i.stack.imgur.com/i52ss.png" style={{
    filter: `drop-shadow(2px 2px 0 COLOR)
             drop-shadow(-2px 2px 0 COLOR)
             drop-shadow(2px -2px 0 COLOR)
             drop-shadow(-2px -2px 0 COLOR)`;
    }}
  />
</div>

Example codesandbox

NOTE: Only works with png