如何在这个多边形周围获得边框？

Question

我使用polygon 创建了一个有 5 个角的形状，如下所示。

这是制作它所需的 css：

div {
    width: 280px;
    height: 280px;
    background: #1e90ff;
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%);
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%);
    border: 3px solid black;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
}

不幸的是，我无法在形状周围添加黑色边框（右侧缺失）。我该怎么做？

我创建了一个小提琴here。

Answer 1

border 属性围绕元素的外部，clip-path 属性将掩码应用于元素。因此，就其他 CSS 规则而言，您仍在处理矩形。因此，您不能简单地应用边框。

但是，非常接近您想要的效果并非不可能。使用（和滥用）CSS 伪元素、边框和过滤器，您可以创建相同的形状以及仅具有单个 HTML div 的轮廓。

div {
  position: relative;
  width: 210px;
  height: 280px;
  background: #1e90ff;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  filter:
    drop-shadow( 0px  3px 0 black)
    drop-shadow( 0px -3px 0 black)
    drop-shadow( 3px  0px 0 black)
    drop-shadow(-3px  0px 0 black);
  -webkit-filter:
    drop-shadow( 0px  3px 0 black)
    drop-shadow( 0px -3px 0 black)
    drop-shadow( 3px  0px 0 black)
    drop-shadow(-3px  0px 0 black);
}
div::after {
  position: absolute;
  display: block;
  content: '';
  width: 0;
  height: 0;
  left: 210px;
  top: 0;
  border-left: 70px solid #1e90ff;
  border-right: 70px solid transparent;
  border-top: 140px solid transparent;
  border-bottom: 140px solid transparent;
}

<div>
</div>

那么，这里发生了什么？

主 div 元素只是形状的矩形部分（具有圆形的左上角和左下角）。它还有一个 ::after pseudo-element 用于创建三角形。三角形是使用 CSS border-triangle hack 完成的。

好的，这样就可以创建形状而不必屏蔽任何元素，但是仍然不能直接应用边框，因为我已经（ab）使用边框来创建三角形。使用 CSS outline 或 box-shadow 将是下一个合乎逻辑的选择，但这两个属性都围绕元素的边界框...忽略圆角或 hacky 透明边框等功能。

输入 CSS 过滤器属性。这提供了一系列后处理过滤器。需要注意的重要一点是，它们在应用时将元素视为透明蒙版，而不是尊重元素的边界框......并且有一个阴影过滤器！

不幸的是，它不如 box-shadow 属性灵活，因为它没有“spread”参数，可用于创建大于元素的实体形状。为了解决这个问题，我们需要在每个方向上投射阴影：上、下、右和左。这就是这个怪物的来源：

filter:
  drop-shadow( 0px  3px 0 black)
  drop-shadow( 0px -3px 0 black)
  drop-shadow( 3px  0px 0 black)
  drop-shadow(-3px  0px 0 black);

哒哒！

对此进行扩展：这适用于您可以设法创建的任何形状（只要它在没有剪裁的情况下完成）。只需将阴影过滤器应用于元素或父/包装器 div（如果它是多元素形状）即可获得边框。

Answer 2

我在这里有点伪命题，但你总是可以用黑色重新创建元素并将其扔在原始元素后面，给人一种轮廓的印象。适用于大多数用途，该提案在此代码笔中进行了演示：http://codepen.io/anon/pen/MeJorM

codepen 中的 CSS 进行了一些更改。您的原件是“.orig”。

div.orig {
  position:relative;
    width: 280px;
    height: 280px;
    background: #1e90ff;
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%);
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%);
  border: 1px solid black;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  display:block;
}
div.abc {
  position:relative;
    width: 280px;
    height: 280px;
    background: #000;
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%);
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%);
  border: 1px solid black;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  display:block;
}
div.abc div.def{
  top:-0.02em;
  left:-0.2em;
  position:absolute;
  display:block;
    width: 278px;
    height: 280px;
    background: #1e90ff;
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%);
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%);
  border: 1px solid black;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
}