边界半径倒置且带有复杂的框阴影

Question

我正在尝试重新创建具有反边界半径和几个边界的打印卡。 我使用框阴影在矩形上处理了边框，并且用100％边框半径divs填充了倒角。 我将阴影应用到圆角上，看起来超级棒。

有什么方法可以使用圆形svgs修剪拐角，然后使用filter：drop-shadow？ 不确定是否有可能。 还有更好的主意吗？

的HTML：

   #greetings
    .top.left
    .top.right
    .bottom.left
    .bottom.right

CSS：

#greetings{
  box-shadow:  -6px 6px 0 #8E9090, 6px -6px 0 #8E9090, -6px -6px 0 #8E9090, 6px 6px 0 #8E9090, -9px 9px 0 #f88125, 9px -9px 0 #f88125,9px 9px 0 #f88125, -9px -9px 0 #f88125, -12px 12px 0 #8E9090, 12px -12px 0 #8E9090, 12px 12px 0 #8E9090, -12px -12px 0 #8E9090;;

  div {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: #f88125;
  }

  .top { top: -20px; }
  .bottom { bottom: -20px; }
  .left { left: -20px; }
  .right { right: -20px; }

  .top.right {
    box-shadow:  -6px 6px 0 #8E9090,  -9px 9px 0 #f88125,  -12px 12px 0 #8E9090;
  }

目标：

HTML角落：

怪异的阴影：

Answer 1

我无法通过您的盒子阴影方法实现这一目标。

我在边框和相对位置上取得了类似的成绩。 没有时间完善代码，如果仔细看，它是不对称的。 还没有完成，但我想我会与其他合作。

我敢肯定，您可以试一下圆圈div的宽度，以使卡片看起来与原始卡片更相似。

html

<div class="label">
        <div class="inner-border-two"></div>
        <div class="inner-border"></div>
        <div class="corner-0 corner"></div>
        <div class="corner-0 inner corner"></div>
        <div class="border border-top"></div>
        <div class="corner-1 corner"></div>
        <div class="corner-1 inner corner"></div>
        <div class="border border-right"></div>
        <div class="corner-2 corner"></div>
        <div class="corner-2 inner corner"></div>
        <div class="border border-bottom"></div>
        <div class="corner-3 corner"></div>
        <div class="corner-3 inner corner"></div>
        <div class="border border-left"></div>
    </div>

的CSS

.label{
  position: relative;
  display: inline-block;
  width: 660px;
  height: 458px;
  border: 30px solid #F88125;
  padding: 0;
}

.label .inner-border-two{
  height: 104%;
  width: 103%;
  border: 2px solid #8E9090;
  position: absolute;
  top: -8px;
  left: -8px;
}

.label .inner-border{
  height: 100%;
  width: 100%;
  border: 6px solid #8E9090;
  position: absolute;
}


.label .corner {
  width: 38px;
  height: 38px;
  position: absolute;
  background-color: #F88125; //Orange
}

.label .corner-0{
  left: 0;
  top: 0;
  border-bottom-right-radius: 100%;
  border-bottom: 6px solid #8E9090;
  border-right: 6px solid #8E9090;
}

.label .corner-0.inner{
  left: -8px;
  top: -8px;
  border-bottom: 3px solid #8E9090;
  border-right: 3px solid #8E9090;
}

.label .corner-1{
  right: 0;
  top: 0;
  border-bottom-left-radius: 100%;
  border-bottom: 6px solid #8E9090;
  border-left: 6px solid #8E9090;
}

.label .corner-1.inner{
  right: -10px;
  top: -8px;
  border-bottom: 3px solid #8E9090;
  border-left: 3px solid #8E9090;
}

.label .corner-2{
  right: 0;
  bottom: 0;
  border-top-left-radius: 100%;
  border-top: 6px solid #8E9090;
  border-left: 6px solid #8E9090;
}

.label .corner-2.inner{
  right: -10px;
  bottom: -8px;
  border-top: 3px solid #8E9090;
  border-left: 3px solid #8E9090;
}

.label .corner-3{
  left: 0;
  bottom: 0;
  border-top-right-radius: 100%;
  border-top: 6px solid #8E9090;
  border-right: 6px solid #8E9090;
}

.label .corner-3.inner{
  left: -8px;
  bottom: -8px;
  border-top: 3px solid #8E9090;
  border-right: 3px solid #8E9090;
}