css - 带有阴影的 div 的 CSS 折叠角

Question

我有带圆角框阴影的 div 块：

.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 右侧有一条细线，我无法将其移开。任何建议如何做到这一点？

Answer 1

通过使用clip-path，您可以巧妙地切断“多余”空间。通过使用 CSScalc()方法，我们可以通过插入边框偏移值来计算需要多大的偏移量。

例如，在这里我出于演示目的将您的盒子阴影修改为 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>