Question

我有一个内有三角形的div，如下所示：

#inner-div {
  width:200px;
  height:200px;
  background-color:black;
  position:relative;
  border:2px solid red;
}
#triangle {
  border-right:15px solid transparent;
  border-left:15px solid transparent;
  border-bottom:15px solid white;
  position:absolute;
  bottom:0px;
  left:50%;
  margin-left:-13.5px;
}

<div>
  <div id="inner-div">
    <span id="triangle"></span>
  </div>
</div>

但我想要的是红色边框不会继续直线，但会以某种方式跟随三角形的路径并用它弯曲。
有没有办法只使用编码（没有图像）。所有帮助表示赞赏 PS：我知道这个网站有类似的问题，但是它们的答案不是跨浏览器，它只是WebKit，我想要的是跨浏览器解决方案。

Answer 1

您可以使用伪元素执行此操作：http://codepen.io/joshnh/pen/5e1c4f87107511497a63ca8a68e5804b

<div class="inner-div">
    <span class="triangle"></span>
</div>

.inner-div {
  width:200px;
  height:200px;
  background-color:black;
  position:relative;
  border:2px solid red;
  z-index:-1;
}
.triangle {
  border-right:15px solid transparent;
  border-left:15px solid transparent;
  border-bottom:15px solid white;
  position:absolute;
  bottom:-2px;
  left:50%;
  margin-left:-15px;
}
.triangle:after {
  border-right:18px solid transparent;
  border-left:18px solid transparent;
  border-bottom:18px solid red;
  content:'';
  position:absolute;
  left:-18px;
  bottom:-15px;
  z-index:-1;
}

为内三角形添加边框

1 个答案: