div 内六边形背景图像的边框

Question

在我的 ReactJs 项目中，我有一个 <div> 具有六边形背景图像。

我想在此背景图像周围添加一个六边形边框。是否可以使用 css 来做到这一点？

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

在 div 上添加边框会在其上应用矩形边框。

这是背景图片，我的要求是在黑色边框外的这张图片上添加边框。

Answer 1

您可以使用 drop-shadow 过滤器属性

<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

注意：仅适用于 png

div 内六边形背景图像的边框

Border around a hexagonal background image inside a div

html

css

png

border