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，您可以巧妙地减少“多余”空间。通过使用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>

CSS用阴影折叠了div的角落

1 个答案: