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 prevent the background image from getting blurry

    How to get Jsfiddles working on a website? [duplicate]

    How to fix width of tooltip at IE8

    how to place css div container “text-align: center ;”

    how to animate a text in javafx using css?

    How to separate header from content

    Integrating CSS and CherryPy: How to fix the 404 “/” Not Found Error?

    How do I create tabs in vertical alignment?

    Only show text on image when you hover - wordpress theme

    How to add multiple link styles on the same page?

    CSS question: How to fix several rendering issues on http://www.fareham.ac.uk

    How to control the appearance of a widget on client web sites CSS

    How to align

    and tags side-by-side?

    how to make a input tag takes the rest of a td space in css?

    Javascript: How do I get the id of a clicked link and then style it in css

    How to manage CSS files on design A/B test

    How to combine jquery codes with similar functions?

    How do I get css links to resolve correctly when adding a PathInfo value?

    How to create three columns in css

    Google Apps Script How to link to JS or CSS file on Google Drive

    How to pop a dialog box /iframe/Lightbox like one below above the webpage content [closed]

    How to disable by overriding webkit-transform and not deleting the line

    QuickSand Script not showing correctly in IE 7

    How do I customize an asp:Button class?

    How to code CSS for all browsers in jQuery.css() method?

    how to add a fixed position Box on left side of each post [closed]

    How to use one single png image to create multiple website buttons (and their hovers)

    How do I get this ul li dropdown menu to show on hover with jquery or javascript?

    How can I programatically show/hide a button that is part of the body template in Meteor?

    How to stack multiple divs on top of each other and each have a height of 100%