Diagonal Border in Header instead of Background-Image

I want to include a transparent diagonal border in glassy header on top instead of background-image; stretching the screen, like the diagonal section border avalilable in farb-sections. Demo on how the diagonal border should look like

I had a work-around by simply creating a transparent .png with diagonal border and using the following quick .css for the glassy header:

#top .av_header_glassy.av_header_transparency #header_main {
	background: url("//riegelmedia.de/wp-content/uploads/2017/04/header-fd118-sv.png"), none repeat scroll 0 0; background-repeat: none !important; -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
}

.av_header_glassy.av_header_transparency .header_bg{
background: rgba(255,255,255,0.0) !important;
}

But it would be much better to use no picture but code. I have no clue how to achieve this – any ideas?

Thanks in advance :-)

• This topic was modified 7 years, 7 months ago by harryriegel.