Question

我接下来回答用bg图像创建一个八边形：

如何在其周围添加边框？

  .octa {
    height: 100%;
    overflow: hidden;
    position: absolute;
    @include rotate(45deg);
    width: 100%;
  }
  .octa:after {
    background-image: url('http://lorempixel.com/400/400/nature');
    background-position: center center;
    background-size: auto 100vh;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    @include rotate(45deg);
  }

提前致谢

Answer 1

这是一个非常难以在CSS中实现的形状，我建议使用SVG作为替代方案。

<svg preserveAspectRatio="none" viewbox="0 0 100 100" width="50%">
  <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="http://lorempixel.com/500/500/" x="0" y="0" width="100" height="100" />
    </pattern>
  </defs>
  <path d="M25,2
           L75,2
           L98,25
           L98,75
           L75,98
           L25,98
           L2,75
           L2,25z" fill="url(#img1)" stroke-width="1" stroke="black"></path>
</svg>

Answer 2

您可以添加box-shadow而不是border来围绕八角形创建边框效果。

我做了什么：

我将box-shadow提供给元素和:after pseudo-element，然后添加了一个额外的容器div，以便它可以隐藏overflow。

注意：如果您想更改边框的颜色，只需将orange中的box-shadow替换为您选择的颜色，如果您想更改border-width，请更换10px box-shadow .container{ width:250px; height:250px; overflow:hidden; padding:10px; position:relative; transform:rotate(225deg) } .octa { height: 250px; overflow: hidden; position: absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); width: 250px; box-shadow:0 0 0 10px orange; } .octa:after { background-image: url('http://lorempixel.com/400/400/nature'); bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); box-shadow:0 0 0 10px orange; }到您选择的两个框阴影上的宽度。

<div class="container">
<div class='octa'></div>
</div>

{{1}}

带边框和背景图片的八边形

2 个答案: