css：切角盒

Question

所以我在css中创建了一个这样的框：

#box
{
background-color: #5d5d5d;
border-radius: 2px 2px 2px 2px;
box-shadow: 5px 5px 2px #767676;
height: 200px;
width: 1100px;
}

结果

在没有覆盖较小的白盒的情况下我想做的事情，并且没有弄乱阴影效果是这样的：

这是可能的吗，还是我不得不在顶部添加一个较小的白盒并使用分层和阴影效果直到它们正确？

或许有一种方法可以使用JavaScript或类似的东西？

注意：我不想做的只是在photoshop中创建框，因为这会减慢页面的整体加载时间

Answer 1

选项：1 boxshadow

body{padding:40px}

#box
{
background-color: white;
border-radius: 2px 2px 2px 2px;
box-shadow: 14px -88px 0px white,5px 5px 2px #767676,inset 199px -88px 0 #5d5d5d;
height: 200px;
width: 510px;
}

<div id=box />

选项：2 伪元素请参阅@Fahad Hasan

Answer 2

您可以使用:before伪元素来实现您尝试执行的操作： DEMO 。这是我添加的CSS：

div#box:before {
    content:'';
    background: white;
    width: 700px;
    display: block;
    height: 100px;
    float: right;
}

Answer 3

您可以创建一个带有白色背景的::after伪元素，将其向右浮动并偏移它以在阴影上移动：

#box::after{
    content:'';
    width:500px;
    height:100px;
    position:relative;
    float:right;
    top:0px;
    right:-7px;
    background-color:#fff;
}

Answer 4

你应该尝试使用伪元素，这是一个例子：

HTML：

<div id="mydiv"></div>

CSS：

div#mydiv{
 width:300px;
 height:300px;
 background-color:red;
}
div#mydiv::after {
 content: ' ';
 display: block;
 background-color: blue;
 width: 270px;
 height: 100px;
 float: right;
}

这是demo