删除框的角落并添加阴影

时间:2016-04-18 14:53:11

标签: css user-interface box-shadow

我想创建一个盒子。

我想删除位于盒子右下方的盒子的一部分。 我需要在被移除的部分放置一个盒子阴影,如青色部分:

like this cyan part

*我不想要圆角。

1 个答案:

答案 0 :(得分:0)

试一试example。但是正如这些家伙所说的那样,先让自己亲自尝试一下,然后再要求我们这样做。

.box{
  position:relative;
  width:300px;
  height:300px;
  background: #2B5891;
}

.box:before {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    border-bottom: 80px solid rgba(255, 255, 255, 0.94);
    -webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px -4px 3px rgba(50, 50, 50, 0.75);
    box-shadow:     inset 0px 0px 10px rgba(0,0,0,0.5);
    border-left: 80px solid #2B5891;
    width: 0;
}
.shadow{
    position: absolute;
    width: 100px;
    height: 110px;
    background: #2B5891;
    bottom: 20px;
    right: 25px;
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(45deg);
    box-shadow: 10px 0px 9px -6px rgba(0,0,0,0.5);
}