带边框和背景图像的八边形答案

【问题标题】：Octagon with Border and Background Image带边框和背景图像的八边形
【发布时间】：2015-09-24 13:27:36
【问题描述】：

我按照这个答案创建了一个带有背景图像的八边形：

如何在它周围添加边框？

  .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);
  }

提前致谢

【问题讨论】：

这不是你所需要的，但这里使用的方法可以给你一些关于如何添加边框的想法 - stackoverflow.com/questions/29881210/…

标签： css css-shapes

【解决方案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>

【讨论】：

太棒了，谢谢。但它会支持背景img吗？否则我找到了一个六边形版本 - csshexagon.com
我会修改它为你使用图像

【解决方案2】：

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

我做了什么：

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

注意：如果您想更改边框的颜色，只需将box-shadow 中的orange 替换为您选择的颜色，如果您想更改border-width，请替换@ 中的10px 987654332@ 到您在两个盒子阴影上选择的宽度。

.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>

【讨论】：