CSS3 将方框阴影设置为斜角

Question

我正在编写一些奇特的东西来自学。

我有一个斜坡左角。现在，我想添加盒子阴影，它显示如下图：

这是我的代码片段：

html, body {
    margin: 0px;
}

.navbar {
  position:relative;
  content:""; 
   border-left: 300em solid #454545;
   border-bottom: 120px solid transparent;
  z-index: 2;
  box-shadow: 0px 8px 23px 4px black;
}


.under-bar {
    margin-top: -40px;
    background: #851e39;
    height: 200px;
    opacity: 0.8
}

<html>
   <body>
        <div class="navbar">

        </div>
        <div class="under-bar">
        </div> 
    </body>
</html>

谁能帮我在header下面设置一个box-shadow？

Answer 1

您可以使用 border-radius 和 transform: scale:

body {
  margin: 0;
  background: #9d4b61;
}

.navbar {
  width: 100%;
  height: 50px;
  background: #5c5c5c;
  border-radius: 0 0 100%/22px 0;
  box-shadow: 0px 8px 23px 4px rgba(0,0,0,0.8);
  transform: scale(1.1,1);
}

<div class="navbar"></div>

border-radius: 0 0 100%/22px 0 在右下角设置一个半径，宽度为 100%，高度为 22px，使半径看起来 "stretched"。

transform: scale(1.1,1) 拉伸整个元素，隐藏每一边的 box-shadow。

Answer 2

您可以使用 transform: rotate(); 而不是边框技巧。

body {
  margin: 0;
}
.navbar {
  height: 200px;
  background-color: #9d4b61;
  position: relative;
  overflow: hidden;
}
.navbar:before {
  content: "";
  position: absolute;
  left: 0;
  top: -50px;
  width: 100%;
  height: 100px;
  box-shadow: 0px 8px 23px 4px #000;
  transform: rotate(-1deg);
  background-color: #333;
}
.menu {
  position: relative;
  left: 20px;
  top: 20px;
  color: #fff;
}

<div class="navbar">
  <div class="menu">menu</div>
</div>

CSS3 将方框阴影设置为斜角

CSS3 Set Box Shadow to aslope corner

html

css

box-shadow