CODEWITHSUNDEEP
htmlcsspngborder
thewebtud
thewebtud

Reputation: 584

Border around a hexagonal background image inside a div

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.

here is the background-image

Upvotes: 1

Views: 56

Answers (1)

Madhan S
Madhan S

Reputation: 693

You could do that with drop-shadow filter property

<div ...>
  <img src="https://i.sstatic.net/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

Upvotes: 1

Related Questions