Slope section in Bootstrap


I want to make something like this in Bootstrap framework but no idea how to do It.

I have Fullscreen header background section, I made It fullscreen with a bit jQuery
jQuery( function( $ ) {

    var $window = $( window ),
    $fullscreen = $( '.fullscreen' );
    function fullscreen_sekcije() {
        $fullscreen.children().height( $window.height() );
    if ( $fullscreen.length ) {
        $( document ).ready( fullscreen_sekcije );
        $window.resize( fullscreen_sekcije );

The main structure of header section is standard

<section class="header-section fullscreen" data-stellar-background-ratio="0.5">
  <div class="container">
    <!--bla bla bla-->

CSS is pretty simple too:
.header-section {
background: url(“…/images/header-image.jpg”);

As you can see I use stellar parallax, so is there a way to make at the end something like this - as you see About us section is going up when user scroll and it’s slopy - the problem is that they made slopy section using backgrounds from Photoshop.

Thank you. - here they’ve added simple rule

transform: skewY(-3deg);

to the container - here is even simplier, they’ve put slope image with transparent half on the top of main background

1 Like

Yup, but then all elements into parent div are rotated too.

Fixed - set transform: skewY(3deg) on container into header.

Actually they rotate not the container itself, but its :after child that has absolute position and contains that blue background image

When clip-path has full support you will be able to do similar angled things.

At the moment is webkit only and still experimental I believe so is no use as an answer here but just for interests sake :smile:

Does anyone know how to fix jagged edges in new Edge Browser ?

I had the same issues in Chrome, but after adding rule below, it’s fixed

-webkit-backface-visibility: hidden;

But in Egde still got this issue.Any idea ?

Show us your code for the box with the sloped edge, please.

.header-section {
    background: url("../images/header3.jpg");
    transform: skewY(-3deg);
    border-bottom: 1px solid #eee;
    margin-top: -55px;
    padding-bottom: 100px;
    -webkit-backface-visibility: hidden;

Monitors do well with lines that follow a straight X or Y axis, angles not so much.

I guess most browsers do a fairly good job at anti-aliasing

And there is CSS that is coming or already here, but as Paul said, support is less than ideal ATM

Guess which browser most often comes up in “not supported” - yep, IE

True, Edge is not IE, but it is MicroSoft and skeptic that I am I have a feeling once the data for it gets known it too will show up in a lot of “not supported” lists.

So what can be done?

If you think of the screen as rows and columns of small squares, drawing a line from X1, Y1 to X2, Y2 would be like taking “steps up a staircase” eg. 45 degrees 1 step up, 1 step over, while 20 degrees might be more like 5 steps up, 1 step over.

You have skewY(-3deg) I’m thinking that through trial and error tweaking that value may result in a better rendering without being too noticeable of a difference.

As mentioned above changing the skew angle may achieve better results.

Something else to try and seems to work in my version of edge is changing the bottom border to less than 1px as IE uses some weird sub pixel positioning.

Try this.

border-bottom: .6px solid #eee;

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.