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>

有人可以帮我在标题下设置一个盒子阴影吗？

Answer 1

您可以使用transform: rotate();代替边框技巧。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

border-radius: 0 0 100%/22px 0在右下角设置半径，宽度为100％，高度为22px，半径为a＆＃34;拉伸＆＃34;看。

transform: scale(1.1,1)拉伸整个元素，隐藏每一面的盒子阴影。

CSS3将Box Shadow设置为aslope corner

2 个答案: