[英]Multiple div elements with the same linear gradient background do not look the same
[英]Same linear gradient background in ::after as in div
早上好,我希望背景與標題相同,線條漸變在哪里。
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>
拜托,你能幫我嗎?
最簡單的解決方案是使用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>
或者,如果您想獲得比clip-path
更好的支持但又沒有透明度,可以使用更多的漸變:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.