How to make triangle section separator [closed]


Tags: html,css,integration

Problem :

I have to do the integration of a mockup. But I am wondering if there is a way to do it only in CSS.

We have a (diagonal) triangle section separator, and I don't know how to make them in CSS (except with image or svg). And if this is even possible?

My separator looks like this: separator. (It's a huge rectangle triangle at the top of the section).

I'm speaking of the part at the top of the blue line here:

blue_line.

Do you know if it's possible to do it with CSS rules? And if so, how can I do this?



Solution :

Something like this should do. Using vw (viewport-width) to span the entire container.

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 30px 100vw;
  border-color: transparent transparent #007bff transparent;
  }
<div class="triangle"></div>

You can attach this to a :before pseudo-selector on your container.

You will have to do some work for cross-browser compatibility however. See the caniuse on this for more information and updates on supported browsers.


    CSS Howto..

    How to deal with image references in CSS in a Rails 3.1 app

    How to get cards with his content perfectly alligned

    How to apply CSS style to a Sibling Label field of a Div?

    JQuery.ready is too late: How do I apply CSS Values with JQuery before Rendering?

    How do I make a div take the remaining height of a parent?

    How to implement CSS multi-level drop down menu with different classes?

    How to justify short text inside fill fixed width parent with CSS?

    How to exclude Hover for Active LI (Menu)?

    How to override bootstrip.min.css in Joomla-Template CSS file for width 768-1140px

    Hide/Show Load function now working

    How can I vertically align two floated divs?

    How can I base one CSS setting on another?

    How to change logo in php header when change the header js class and CSS

    How I can apply css to part of my jQuery result?

    What is a CSS Parse error and how do I fix it?

    How to get the Tololtip Tail for Menu

    Using CSS, how to create a two-column grid with equal-width columns that are “only as narrow as required”?

    How to use CSS in ASP.NET application

    How to style a randomly generated list of items in Javascript

    I have a CSS file in my App_Themes folder - how can I apply it to my web user control?

    change of encoding shows Weird symbols

    How to properly preload images, js and css files?

    How to trigger a modal view with Highcharts, when zoom is also enabled?

    Showing images in placeholder on focus

    How to reference an embedded image from CSS?

    How do I push inline elements onto the next line

    how to center text html css

    How to grow the width of a div as the width screen decreases using Css?

    how to make shape with diagonal div?

    How To Vertically Align Text On A Squarespace Button?