複雑なボックスシャドウの反転したボーダー半径

Question

ボーダー半径が逆で、ボーダーが2枚のこのプリントカードを再作成しようとしています。ボックスの影を使って枠線を四角形で作ったので、100％のボーダー半径のdivで逆コーディングをしています。私は丸みを帯びたコーナーに影をつけました。

サークルSVGを使用してコーナーをクリップする方法はありますか？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; 
}