Creating CSS triangle down on background

  • Profile Image
    AdminRSCM
    Asked on September 14, 2017 at 03:05 PM

    Is there a cay to style the background color on this form to have a triangle down arrow?

    https://www.jotform.com/build/72565388958174/settings#preview

     

    see attached image of what i'm trying to achieve.

     

    using this css:

    #triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #172751; }

     

     

     

     

  • Profile Image
    Mike
    Answered on September 14, 2017 at 04:38 PM

    If you would like to place the CSS triangle after the form container, you may try using a .form-all:after selector for your CSS.

  • Profile Image
    AdminRSCM
    Answered on September 15, 2017 at 10:19 AM

    Hmm- so add this css to the custom css box? 

     

    .form-all:after {

     width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #172751;

     

    https://form.jotform.us/72565388958174

    This did not work- just created a large blue gap at the bottom of the form on the live site and on the preview form, just a small triangle at the bottom.

     

     

  • Profile Image
    Kevin_G
    Answered on September 15, 2017 at 12:12 PM

    I think de to the form's width, would be a bit hard to display the triangle, but you may try with this code: 

    .form-all:after {

        width: 47%;

        height: 0;

        top: 144px;

        margin-left: auto;

        margin-right: auto;

        position: relative;

        border-left: 50px solid transparent;

        border-right: 50px solid transparent;

        border-top: 143px solid #172751;

        z-index: 100;

    }

    Please note that you will need to change your form's background color in order to notice the difference between the triangle and the form's background. 

     

  • Profile Image
    AdminRSCM
    Answered on September 15, 2017 at 02:41 PM

    Attached is the look on my live site.

     

    Im trying to make my form look like the blue form attached- below the first attached image.

     

    Any advice?

  • Profile Image
    Mike
    Answered on September 15, 2017 at 04:37 PM

    I am not sure if a similar CSS can be applied to your form, but you can clone the next form and check its CSS to get an idea.

    https://form.jotformpro.com/72575996761980

  • Profile Image
    AdminRSCM
    Answered on September 21, 2017 at 09:07 AM

    awesome but this link did not work?


    https://form.jotformpro.com/72575996761980

  • Profile Image
    Marvih
    Answered on September 21, 2017 at 11:05 AM

    Hi try this one instead https://form.jotformpro.com/72634076076964
    How to clone click HERE


    Let us know if you need help.

    Thanks,