Question

我试图重新创建具有反边框半径和几个边框的此打印卡。我使用框阴影在一个矩形上工作边框，我用100％边框半径div来捏造倒角。我将阴影应用到了圆角，但看起来很棒。

有没有办法使用圆形svgs剪切角落然后使用滤镜：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角落：

Wonky shadow：

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

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

1 个答案: