Web development guru Manoela Ilic shares a cool CSS3 tutorial on creating slopy, skewed elements for your design. It’s inspired by different designs that use angled shapes, diagonal lines and other non-straight elements.

Sample 1:

section>
 <div>
 <article>
 <h3>Some headline</h3>
 <p>Some text</p>
 </article>
 </div>
 <div>
 <!-- ... -->
 </div>
 <!-- ... -->
</section>

Style

CSS

The body will have similar background color which is pink.

body{

 background: #e90089;

}

Hide the main wrapper and pull rotated elements in a way that it would stick out

.se-container{

 display: block;

 width: 100%;

 overflow: hidden;

 padding-top: 150px;

}

Add a negative top margin

.se-slope{

 margin: 0 -50px;

 transform-origin: left center;

}

.se-slope:nth-child(odd){

 background: #000;

 transform: rotate(5deg);

 margin-top: -200px;

 box-shadow: 0px -1px 3px rgba(0,0,0,0.4);

}

.se-slope:nth-child(even){

 background: #e90089;

 transform: rotate(-5deg);

 box-shadow: 0px 2px 3px rgba(0,0,0,0.4) inset;

}

Center the article

.se-content{

 margin: 0 auto;

}

Create some asymmetric triangles on both sides using the transparent border trick

.se-content h3{

 font-size: 60px;

 position: relative;

 display: inline-block;

 padding: 10px 30px 8px 30px;

 height: 80px;

 line-height: 80px;

 margin-bottom: 20px;

 font-family: 'Bitter', 'Trebuchet MS', Arial;

 text-shadow: 1px 1px 1px rgba(0,0,0,0.9);

}

.se-slope:nth-child(odd) .se-content h3{

 background: #e90089;

 color: #000;

}

.se-slope:nth-child(even) .se-content h3{

 background: #000;

 color: #e90089;

}

.se-content h3:before{

 content: '';

 width: 0;

 height: 0;

 border-top: 38px solid transparent;

 border-bottom: 60px solid transparent;

 border-right: 60px solid black;

 position: absolute;

 left: -59px;

 top: 0px;

}

.se-content h3:after{

 content: '';

 width: 0;

 height: 0;

 border-top: 38px solid transparent;

 border-bottom: 60px solid transparent;

 border-left: 60px solid black;

 position: absolute;

 right: -59px;

 top: 0px;

}

Adjust the color for the odd elements

.se-slope:nth-child(odd) .se-content h3:before,

.se-slope:nth-child(odd) .se-content h3:after{

 border-right-color: #e90089;

 border-left-color: #e90089;

}

Style for the paragraph will be the following

.se-content p{

 width: 75%;

 max-width: 500px;

 margin: 0 auto;

 font-style: italic;

 font-size: 18px;

 line-height: 24px;

 padding-top: 10px;

}

Styling the first letter differently

.se-content p:first-letter{

 font-size: 40px;

 font-family: 'Adobe Garamond Pro', Georgia, serif;

}

Rotating the article back to 0 and adjusting the paddings to fit the content nicely

.se-slope:nth-child(odd) .se-content{

 transform: rotate(-5deg);

 color: #e90089;

 padding: 130px 100px 250px 100px;

}

.se-slope:nth-child(even) .se-content{

 transform: rotate(5deg);

 color: #000;

 padding: 150px 100px 250px 100px;

}

You may check out her other samples and learn how you can create them as well. For her full tutorial, click on the image.

Demo and Download

Incoming search terms for the article:

• html5 web design
• slopy web design
• creating a light box html5 css3
• slopy-elements-with-css3
• slopy images css
• slope menu image css
• se-slope:nth-child(even)
• How to give text slope in html from right side
• css3 slope borders
• css3 slope