带有复杂箱体阴影的倒置边框半径

Question

我正试图重新创建具有倒圆角半径和几个边框的打印卡。我得到了使用盒子阴影在矩形上工作的边框，并且我用100％边框半径的div来欺骗倒角。我将这个阴影应用到了圆角，而且看起来非常漂亮。

有没有什么办法可以使用circle 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; 
}