帶有複雜箱體陰影的倒置邊框半徑

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