:: after中与div中相同的线性渐变背景 [英] Same linear gradient background in ::after as in div
本文介绍了:: after中与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>
请,你能帮我吗?
推荐答案
最简单的解决方案是使用clip-path
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>
或者,如果您想获得比clip-path
更好的支持但又没有透明度,则可以使用更多的渐变:
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>
这篇关于:: after中与div中相同的线性渐变背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文