Same linear gradient background in ::after as in div

问题

Good morning, I want to have the same background as in header, where is line gradient.

html, body { margin: 0; background:  #d8dfe9;}
header{position: relative; height: 90px; width: 100%; background: linear-gradient(to right, #045FB4 0%,#00BFFF 100%);}
header:after {content: ''; position: absolute; left: calc(50% - 4.8px); top: 90px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid blue; clear: both; z-index: 1;}
main {position: relative; overflow: auto; ; height: 100vh;}
main #timeline {position: relative; width: 100%; height: 70px; background: white}

<header>
  
</header>
<main>
  <div id="timeline">

  </div>
</main>

Please, can you help me?

回答1:

The easiest solution is to use clip-path

html,
body {
  margin: 0;
  background: #d8dfe9;
}

header {
  position: relative;
  height: 90px;
  width: 100%;
  background: linear-gradient(to right, #045FB4 0%, #00BFFF 100%);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(50% + 10px) calc(100% - 10px), 50% 100%, calc(50% - 10px) calc(100% - 10px), 0% calc(100% - 10px));
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(50% + 10px) calc(100% - 10px), 50% 100%, calc(50% - 10px) calc(100% - 10px), 0% calc(100% - 10px));
}

<header>

</header>

Or you can use more gradient if you want better support than clip-path but without transparency:

html,
body {
  margin: 0;
  background: #d8dfe9;
}

header {
  position: relative;
  height: 90px;
  width: 100%;
  background: linear-gradient(to right, #045FB4 0%, #00BFFF 100%) fixed;
  position:relative;
}
header:before {
  content:"";
  position:absolute;
  width:20px;
  height:10px;
  top:100%;
  right:calc(50% - 10px);
  background:
   linear-gradient(to bottom left,transparent 49%,#d8dfe9 50.5%) left/50% 100% no-repeat,
   linear-gradient(to bottom right,transparent 49%,#d8dfe9 50.5%) right/50% 100% no-repeat,
   linear-gradient(to right, #045FB4 0%, #00BFFF 100%) fixed;
}

<header>

</header>

来源：https://stackoverflow.com/questions/51342956/same-linear-gradient-background-in-after-as-in-div

标签

html

css

background

element

linear-gradients