给这个“形状”添加边框

Question

给这个“形状”添加边框

htmlcssstylesbordershapes

7

我需要为这个“形状”添加边框。由于该形状是使用伪元素after和before创建的，因此有点困难。我找不到正确的方法。

我需要实现的目标是：

我目前的代码：

https://jsfiddle.net/jimmyadaro/xfcjfz3d/

#octagon {
    width: 300px;
    height: 200px;
    background: red;
    position: relative;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: block;
}

#octagon:before,
#octagon:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
}

#octagon:before {
    top: 0;
    border-bottom: 30px solid red;
    border-left: 30px solid #fff;
    border-right: 30px solid #fff;
}

#octagon:after {
    bottom: 0;
    border-top: 30px solid red;
    border-left: 30px solid #fff;
    border-right: 30px solid #fff;
}

<div id="octagon"></div>

我尝试使用阴影和轮廓线，但没有成功。

感谢您的阅读。

注意: 如果这很重要，我将使用纯色背景。

- Jimmy Adaro

2

这个链接可能会对你有所帮助：https://dev59.com/JpLea4cB1Zd3GeqP6MC5 - Geeky

谢谢@geeky，我看到了，但似乎不可扩展。我的意思是，它不能是600x200像素。至少在我尝试的方式中不行。 - Jimmy Adaro

相关 - https://dev59.com/jJLea4cB1Zd3GeqP6cEb 但在这里SVG是最佳选择。 - Paulie_D

嗨，@paulie-d 很高兴在这里见到你！（我在 CSS-Tricks 上看到过你，你帮了我几次）。我有点担心跨浏览器支持的问题。我没有尝试过 SVG。问题是，这个形状是其他元素（文本、图像等）的容器，所以我不知道是否可以信任 SVG。 - Jimmy Adaro

可能有更好的形状，但作为入门，您可以在此处获取一个：http://leaverou.github.io/corner-shape/。选择corner-shape斜角。右键单击模拟的SVG并检查元素，然后就完成了。`corner-shape`是一个建议的4级CSS属性，可以实现您想要的效果，但我不知道它是否会真正实现。 - Ricky Ruiz

显示剩余3条评论

2个回答

2

好的，这是我能想到的用纯CSS方法来解决它的唯一方式：

JSfiddle链接： https://jsfiddle.net/xfcjfz3d/7/

body {
    background:#fff;
}

#octagon {
  position:relative;
 width: 300px;
 height: 200px;
 background: green;
 position: relative;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 display: block;
}

#octagon:before,
#octagon:after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
}

#octagon:before {
 top: 0;
 border-bottom: 30px solid green;
 border-left: 30px solid #fff;
 border-right: 30px solid #fff;
}

#octagon:after {
 bottom: 0;
 border-top: 30px solid green;
 border-left: 30px solid #fff;
 border-right: 30px solid #fff;
}

.tall {
  position:absolute;
  background:red;
  width:230px;
  height:190px;
  left:35px;
  top:5px;
  z-index:1;
}

.wide {
  position:absolute;
  background:red;
  width:290px;
  height:130px;
  left:5px;
  top:35px;
  z-index:1;
}

.corner {
  position:absolute;
  background:red;
  width:45px;
  height:43px;
  
  z-index:1;
  transform: rotate(45deg);
}

.topleft {
  left:14px;
  top:14px;
}

.topright {
  //background:black;
  left:241px;
  top:13px;
}

.bottomleft {
  background:red;
  left:13px;
  top:143px;
}

.bottomright {
  background:red;
  left:241px;
  top:143px;
}

<div id="octagon">
  <div class="tall"></div>
  <div class="wide"></div>
  <div class="corner topleft"></div>
  <div class="corner topright"></div>
  <div class="corner bottomleft"></div>
  <div class="corner bottomright"></div>
</div>

- Varin

谢谢，@varin 不错的方法，但似乎不够可扩展。此外，我需要在形状内添加元素（文本、图片等）。无论如何，非常感谢你。 - Jimmy Adaro

嗯，我认为这可以通过使用不同的单位来实现可扩展性。如果需要内部元素，您始终可以添加另一个具有内容和更高 z-index 的 div。 - Varin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- darrylyeo · Accepted Answer

这是我的解决方案。不需要实心背景颜色。这可能适用于您的实际用例。 JSFiddle

#octagon {
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 300px;
    height: 200px;
    overflow: hidden;
    position: relative;
}

#octagon:before,
#octagon:after {
    content: "";
    display: block;
    width: 300px;
    padding-top: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: -1;
}
#octagon:before {
    background: red;
}
#octagon:after {
    background:
        linear-gradient(
      45deg,
      #0e0 calc(50% - 150px + 10px), transparent 0,
      transparent calc(50% + 150px - 10px), #0e0 0%),
     linear-gradient(
      -45deg,
      #0e0 calc(50% - 100px + 10px), transparent 0,
      transparent calc(50% + 100px - 10px), #0e0 0);
    box-shadow: 0 0 0 10px #0e0 inset;
}

<div id="octagon">Hello World!</div>