Question

我使用<div><div><h4>10/06/2016</h4></div><ul><li>Alex</li><li>Marc</li></ul></div> <div><div><h4>12/06/2016</h4></div><ul><li>John</li><li>Steve</li></ul></div> <div><div><h4>13/06/2016</h4></div><ul><li>Elliot</li></ul></div>创建了一个包含5个角的形状，如下所示。

这是制作它所需要的css：

polygon

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

我创造了一个小提琴here。

Answer 1

我在这里做了一些伪踢，但是你可以随时重新创建一个黑色的元素并将它扔到原始元素后面，给人一种轮廓的印象。适用于大多数用途的提案在此代码中展示：http://codepen.io/anon/pen/MeJorM

codepen中的CSS已经改变了一点。您的原文是＆＃34; .orig＆＃34;。

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

Answer 2

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将是下一个逻辑选择，但两个属性都会围绕元素的边界框...忽略圆角或黑色透明边框等特征。

输入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应用（如果它是多元素形状）以获得边框。

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

2 个答案: