想用 box-shadow 为 header 使用 css 创建三角形

Question

见下面的代码。我试过但没有得到那个三角形的 box-shadow。

如上图所示，我想使用 css 创建一个带阴影的三角形。（也适用于响应式视图）。

我还添加了额外的 div 并尝试使用旋转属性，但没有得到正确的解决方案。

ul {
  margin-bottom: 0px;
}

ul li {
  list-style: none;
}

.main-header {
  background-color: #F16322;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}

.main-header:before {
  content: '';
  width: 50%;
  height: 190px;
  background: #cccccc;
  top: 0;
  position: fixed;
  z-index: 0;
  clip-path: polygon(100% 0, 0 0, 0 100%);
}

.main-menu {
  float: right;
  display: inline-block;
}

.main-menu ul {
  float: left;
}

.main-menu li {
  float: left;
  margin-right: 10px;
}

.main-menu li a {
  display: inline-block;
  padding: 34px 16px;
  color: #ffffff;
  font-size: 20px;
}

.main-menu>ul>li:last-child {
  margin-right: 0px;
}

.main-menu>ul>li:last-child>a {
  padding-right: 0px;
}

.main-menu li a:hover,
.main-menu li.current-menu-item>a {
  color: #000000;
}

.header-logo {
  float: left;
}

.header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

<header class="main-header">
  <div class="container">
    <div class="header-wrap">
      <div class="header-logo">
        <a href="javascript:;"><img src="images/logo.png" alt="BNPK logo"></a>
      </div>
      <div class="main-menu">
        <ul>
          <li>
            <a href="#features_section">Features</a>
          </li>
          <li>
            <a href="#popular_sign">Pricing</a>
          </li>
          <li>
            <a href="#contact_section">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

如上图所示，我想使用 css 创建一个带阴影的三角形。（也适用于响应式视图）。

我还添加了额外的 div 并尝试使用 rotate 属性，但没有得到正确的解决方案。

Answer 1

您无法向使用剪辑路径的元素添加框阴影，但我使用我曾经找到的解决方法为您修复了它。

<head>
<style>
ul {
  margin-bottom: 0px;
}

ul li {
  list-style: none;
}

.main-header {
  background-color: #F16322;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}

.triangle {
  filter: drop-shadow(3px 1px 1px #b0b0aa);
  position: absolute;
  width: 50%;
  height: 190px;
}

.triangle::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:  #cccccc;
  color:  #cccccc;
  --p: polygon(100% 0, 0 0, 0 100%);
  -webkit-clip-path: var(--p);
  clip-path: var(--p);
  content: '';
}

.main-menu {
  float: right;
  display: inline-block;
}

.main-menu ul {
  float: left;
}

.main-menu li {
  float: left;
  margin-right: 10px;
}

.main-menu li a {
  display: inline-block;
  padding: 34px 16px;
  color: #ffffff;
  font-size: 20px;
}

.main-menu>ul>li:last-child {
  margin-right: 0px;
}
</style>
</head>
<body>
<header class="main-header">
  <div class="triangle">
  </div>
  <div class="main-menu">
    <ul>
          <li>
            <a href="#features_section">Features</a>
          </li>
          <li>
            <a href="#popular_sign">Pricing</a>
          </li>
          <li>
            <a href="#contact_section">Contact</a>
          </li>
        </ul>
  </div>
</header>
</body>
</html>

Answer 2

正如@Pitzas 所建议的那样，过滤器将是解决方案。就个人而言，我更喜欢对三角形使用 SVG，然后对其应用阴影。过滤器与 SVG 结合起来非常强大。

对于你的影子，我会使用 feGaussianBlur 滤镜：

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur

这里有一个使用它的例子：

http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow.svg

想用 box-shadow 为 header 使用 css 创建三角形

Want to create triangle shape with box-shadow using css for header

html

css

responsive-design