CSS折叠带阴影的div的角落

Question

我有带圆角的div块和box-shadow

.itemapplication {
    position:relative;
    overflow:hidden;
    border-radius: 10px;
    width: 180px;
    height: 225px;
    float: left;
    box-shadow: 0px 5px 1px 0px #bfc4c8;
}

我想要制作一个角折叠效果。这是我目前的代码:

.itemapplication:before {
   content:"";
   position:absolute;
   top:-1px;
   right:-1px;
   border-style:solid;
   border-width:20px;
   border-color:#eceff4 #eceff4 red red;
   -webkit-border-bottom-left-radius:10px;
   -moz-border-radius:0 0 0 10px;
   border-radius:0 0 0 10px;
   -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

这是我得到的结果：

这是我得到的：

如您所见，div 右侧有一条细线，我无法将其移开。您有什么建议吗？

- grabber

---

我认为这是不可能的。 - Rápli András

这是适用于所有浏览器还是只有 Firefox？编辑 - 我认为是 Firefox，因为我以前在那里看到过这个问题。 - Adam Tomat

所有浏览器都一样。有没有其他方法可以做到这一点，比如使用小图片或类似的东西？ - grabber

Answer 1

通过使用clip-path，您可以整洁地切掉“多余”的空间。通过使用CSS的calc()方法，我们可以通过插入边框偏移值计算出需要偏移的大小。

例如，这里我为演示目的修改了您的盒子阴影为5px。

盒子阴影偏移量+扩散=6px。我将这个值插入到相应的剪辑路径计算中，以使阴影+扩散效果不会被剪裁。

我还在3-5步中的折叠处添加了一些阴影偏移量。

clip-path: polygon(-2px 0%, /*left top */
                    calc(100% - 39px) -1px, /** right top start fold 40px = 2 times border width substract a pixel for more fold effect.**/
                    100% 39px, /** right top end fold 40px = 2 times border width **/
                    100% 44px, /** right top move down 5px for box shadow offset down **/
                    calc(100% + 5px) 49px, /** right top move 5 right for clipping, add 5 to 44 for down offset to follow fold angle **/
                    calc(100% + 5px)  calc(100% + 5px), /** right bottom  **/
                    -1px calc(100% + 5px) /** left bottom  **/
                    );

.wrap {
   width: 100px;
   padding:10px;
   background-color: #eee;
   border: 1px solid #333;
}

.wrap img {
   box-shadow: 5px 5px 1px 0px gray;
   width: 100%;
   height: auto;
   margin: 0px;
}

.folded {
  position: relative;
  padding: 0px;
  margin: 0px;
  
  clip-path: polygon(0% 0%, /*left top */
                    calc(100% - 39px) -1px, /** right top start fold 40px = 2 times border width**/
                    100% 39px, /** right top end fold 40px = 2 times border width **/
                    100% 44px, /** right top move down 5px for box shadow offset down **/
                    calc(100% + 6px) 49px, /** right top move 6 right for clipping(shadow offset + spread), add 5 to 44 from top offset to follow fold angle **/
                    calc(100% + 6px)  calc(100% + 6px), /** right bottom   **/
                    0% calc(100% + 6px) /** left bottom  **/
                    );
}


.folded:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 20px 20px 0;
  border-style: solid;
  border-color: orange;
  
  border-width: 20px;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
  
  -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0 2px 3px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  
}

<div class="wrap">
    <div class="folded">
      <img src="https://cdn.sstatic.net/Img/april-fools-2019/so-tile.png?v=5922b5fd7715" >
    </div>
  </div>

- Tschallacka