How to make Responsive Slanted Divs in CSS – 2020 Version

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

If you need to create a slanted div for your website then you have come to the right place.

We are going to create a slanted Div using CSS only. We are going to use the clip-path property and will be skewing the whole element. Here is the code:-

HTML


<div class="slanted"><a href="https://silvawebdesigns.com">SILVA WEB DESIGNS</a></div>

CSS


.slanted {
    background-color: #3b3c43;
    height: 500px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%); 
}

It really is that simple.

If you prefer to see a JSFiddle then click here.

We sure hope this helps. If you would like any assistance with this, drop us an email or leave a comment below and we will get back to you.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Create Equal Height Elements / Columns

In this simple tutorial, we’re going to show you how you can set all elements with a particular class to the highest element height. To do this, we need to loop through all elements with a particular class, get the highest value, then match all other elements to the same height. We can do this using jQuery as follows:


var maxHeight = 0;

$(".some-element").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(".some-element").height(maxHeight);

Awesome, we now have set all elements to the same height. We can take this one step further as elements can change in max height when you are shrinking the browser width for example. What we can do here is use the resize function to update the values.

To make things easier, we can create a function, then call the function both on page load and within the resize function as follows:


var maxHeight = 0;

function matchMaxHeight() {
	$(".some-element").each(function(){
	   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
	});

	$(".some-element").height(maxHeight);
}

matchMaxHeight();

$(window).resize(function() {
	matchMaxHeight();
});

Pretty straightforward right?

If this tutorial as helped you or if you need some further explanation on the above code, feel free to drop us a comment below and we’d love to assist you.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

CSS – Text Rotation

If you’re trying to turn some text using rotation for elements, such as rotating text 90 degrees clockwise/counterclockwise then you’re at the right place.

So how can we achieve this? Simple! Check out the below CSS which gives you cross-browser compatibility:-


.rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(-90deg);

  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* IE */
  -ms-transform: rotate(-90deg);

  /* Opera */
  -o-transform: rotate(-90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.

Check out the following CodePen to see this in action!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Full Width Containers in Limited Width Parents

How do we make a full browser width container when we’re inside a limited-width parent? In other words, how do we stretch the div outside of it’s ‘container’.

If we could use absolute positioning, we could set the container to be at left: 0; and width: 100%; – but we can’t because we want the container to remain inflow.

In my opinion, the best way to get around this situation is as follows:-


.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

The idea behind this technique is that we push the container to the exact middle of the browser window with left: 50%;, then we pull it back to the left edge with negative -50vw margin.

This way you don’t need any information about the parent width at all. Do note that both this and the calc() version require the parent to be exactly centred in the browser.

So why bother with the right and margin-right? To be honest, you don’t really need it on a left-to-right site, but if there is any chance of direction: rtl; happening, you’ll need the right properties, so having both is more bulletproof.

So start getting your div’s stretched outside your containers! If this has helped you, leave a comment!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share