CSS用阴影折叠div的角落 [英] CSS folded corners of div with shadow

问题描述

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

I have div blocks with rounded corners box-shaddow:

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

，我想折角.到目前为止，这是我的代码:

and I want to make corner fold. Here is my code so far:

.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的右侧有一条细线，我无法将其移开.有什么建议怎么做吗?

As you can see, there is thin line on the right side of div and I cant move it away. Any advice how to do that?

推荐答案

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

By using clip-path you can neatly cut off the 'excess' space. By using the CSS calc() method we can compute how big the offsets need to be by plugging in the border offset values.

例如，在这里我出于演示目的将框阴影修改为5px.

For example, here I modified your box shadow for demonstration purposes to 5px.

框阴影偏移+展开= 6像素.我将此值插入相关的剪切路径计算中，以免阴影+扩散效果被剪切.

Box shadow offset + spread = 6px. I plug this value in the relevant clip path computations so the shadow + spread effect won't get clipped.

我还在第3-5步中为折叠添加了一些阴影偏移.

I also added in some shadow offset for the fold at steps 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>

这篇关于CSS用阴影折叠div的角落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！