Creating CSS triangle down on background

  • AdminRSCM
    Asked on September 14, 2017 at 3: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; }

     

     

     

     

    Jotform Thread 1248059 Screenshot
  • Mike
    Replied on September 14, 2017 at 4: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.

  • AdminRSCM
    Replied 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.

     

     

  • Kevin Support Team Lead
    Replied 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. 

     

  • AdminRSCM
    Replied on September 15, 2017 at 2: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?

    Creating CSS triangle down on background Image 1 Screenshot 30Creating CSS triangle down on background Image 2 Screenshot 41

  • Mike
    Replied on September 15, 2017 at 4: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

    Creating CSS triangle down on background Image 1 Screenshot 20

  • AdminRSCM
    Replied on September 21, 2017 at 9:07 AM

    awesome but this link did not work?


    https://form.jotformpro.com/72575996761980

  • Marvih
    Replied 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,

  • AdminRSCM
    Replied on September 25, 2017 at 11:17 AM

    This form looks good- up until screen size 1320pixels. The bottom of the form( the triangle) starts to look off. Is there a way to maintain the bottom triangle at all screen sizes?

  • Marvih
    Replied on September 25, 2017 at 12:01 PM

    It should be mobile responsive. Can you try adding "Mobile Responsive" widget and check again.Creating CSS triangle down on background Image 1 Screenshot 20

  • AdminRSCM
    Replied on September 25, 2017 at 12:30 PM

    http://flexogenix.com/knee-pain-relief-charlotte/


    If you check out my live form, now the padding around the inside of form is gone, and not all of the form fields are full width and even?



  • Kevin Support Team Lead
    Replied on September 25, 2017 at 12:52 PM

    I have just checked your form and this is how it displays: 

    Creating CSS triangle down on background Image 1 Screenshot 20

    Please inject the following CSS code in order to display the fields with full width: 

    [data-type="control_dropdown"] .form-input, [data-type="control_dropdown"] .form-input-wide{

      width: 100% !important;

    }


    @media only screen and (max-width: 40em){

      [data-type=control_phone] .form-sub-label-container:first-child {

          width: 100% !important;

      }

    }

    This guide will help you injecting the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps.