具有复杂框阴影的倒置边框半径答案

【问题标题】：Inverted border radius with complex box shadow具有复杂框阴影的倒置边框半径
【发布时间】：2017-05-01 18:57:58
【问题描述】：

我正在尝试重新创建具有反向边界半径和几个边界的打印卡。我使用框阴影使边框在矩形上工作，并且我正在用 100% 边框半径 div 捏造倒角。不过，我将阴影应用到圆角上，它看起来非常糟糕。

有没有办法使用圆形 svgs 来剪辑角落然后使用过滤器：阴影？不确定这是可能的。有更好的主意吗？

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角：

古怪的影子：

【问题讨论】：

你能把html和css包括进来吗？
为什么不把整个的东西都做成SVG？
需要根据里面的动态文本进行扩展。

标签： html css

【解决方案1】：

我无法用你的 box-shadow 方法来解决这个问题。

我在边框和相对定位方面实现了类似的效果。没时间打磨代码，仔细看是不对称的。它还没有完成，但我想我会与其他人合作。

我相信您可以使用 circles 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;
}

【讨论】：