Хотите создать форму треугольника с box-shadow, используя css для заголовка - PullRequest
Новая
       0

Хотите создать форму треугольника с box-shadow, используя css для заголовка

0 голосов
/ 12 марта 2020

См. Код ниже. То, что я пробовал, но не получил 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>

enter image description here

Как видно на изображении выше, я хочу создать треугольную форму с тенью, используя css. (Также для адаптивного просмотра).

Я также добавил дополнительные div и попытался использовать свойства rotate, но не нашел правильного решения.

Ответы [ 2 ]

0 голосов
/ 12 марта 2020

Как предложил @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

0 голосов
/ 12 марта 2020

Вы не можете добавить box-shadow для элемента, на котором вы используете clip-path, но я исправил его для вас, используя обходной путь, который я нашел один раз. 

<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>
...