Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 4, 2018 at 12:52 am #951172
    Kavvermus

    Hi

    So I am trying to build a section with a gradient background color, however the top of the section also has a diagonal border from the upper section. Is there anyway to make the gradient color also show on the diagonal border part?

    diagonal border gradient

    May 4, 2018 at 2:49 pm #951702
    Vinay

    Hey Kavvermus,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    
#about .border-extra-diagonal-inverse .av-extra-border-inner {
	    background-image: linear-gradient(to right,#1f71b8,#4d99cd);
}

    Best regards,
    Vinay

    May 4, 2018 at 4:18 pm #951751
    Kavvermus

    Hey Vinnay

    It did make it a lot better, but it is not perfect.

    Is there anyway to make it not noticeable?

    May 4, 2018 at 7:05 pm #951815
    Guenni007

    you only had to be familar with clip-path and polygones:

    i updated at this testpage just to see if it works on Enfold 4.3.1: https://webers-testseite.de/elegant/
    you see that the png isn’t realy good masked but for demo that is enough.

    On clip-path there you dont’t need that extra container to mimic the slant-
    but sadly there was some troubles with mobile devices and fixed positioning too

    • This reply was modified 6 years, 7 months ago by Guenni007.
    May 7, 2018 at 11:14 am #952605
    Kavvermus

    Guenni077 That worked perfectly! Thank you so much!

    If others need the same the code is:

    #section_id {
clip-path: polygon( 0 0,100% 10vw,100% calc(100% - 10vw),0 100%);
web-clip-path: polygon( 0 0,100% 10vw,100% calc(100% - 10vw),0 100%);
margin-top: -10vw;
}
    May 7, 2018 at 9:32 pm #952889
    Basilis

    Hi,

    Glad we could help!
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Basilis

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Diagonal border and gradient background color’ is closed to new replies.