How to create a div with a diagonal (or angular) top line

Question

I am new to CSS3, and all I know is self-taught, reading you guys or any other lessons, so after several hours of research and trial error, I really could use your help: (.

I am trying to rotate ONLY the top row of the div. This is what I have done so far:

http://blanc-design.com/sigma2/

On the footer, I rotate two divs to create this effect. But what I want to do is have a straight bottom line on a green div. This is an example of how I would like:

http://blanc-design.com/sigma2/ex.jpg

I don’t know if I’ll explain it correctly. This is the CSS code I used to rotate the divs:

#footer-top { color: #fff; padding: 35px 0 15px; transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-webkit-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-moz-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-o-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-ms-transform: rotate(2deg) scale(1) skew(3deg) translate(0px); } #footer-space { padding: 0 0 6px; } #footer-top2 { color: #fff; background-color: rgba(20, 122, 188, 0.5); background: rgba(20, 122, 188, 0.5); color: rgba(20, 122, 188, 0.5); padding: 6px 0 12px; height: 2px; transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-webkit-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-moz-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-o-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-ms-transform: rotate(358deg) scale(1) skew(0deg) translate(0px); } #footer-top3 { color: #fff; background-color: rgba(128, 185, 46, 0.7); background: rgba(128, 185, 46, 0.7); color: rgba(128, 185, 46, 0.7); transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); -webkit-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); -moz-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); -o-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); -ms-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); } 

And this is HTML:

 <div id="footer-top2"></div> <div id="footer-space"></div> <div id="footer-top3"> <div id="footer-top"> <div class="container clearfix"> <div class="one-fourth"> <div class="widget twitter-widget"> <h3>Últimos Tweets</h3> <div class="tweet"></div> </div> </div> <div class="one-fourth"> <div class="widget twitter-widget"> <h3> Facebook Feed</h3> <div class="tweet"></div> </div> </div> <div class="one-fourth"> <div class="widget twitter-widget"> <h3>Fotos en Instagram</h3> <div class="tweet"></div> </div> </div> <div class="one-fourth column-last"> <div class="widget contact-info"> <h3>Contacto</h3> <div>address here </div> </div> </div> </div> </div> </div> 

If any of you could help me, I will be very grateful !!

Thanks in advance.

b.

Answer 1

At first I thought that this could be done using CSS triangles, but I cannot fully understand how to make a triangle with a direct pointer to the right 100%, so I switched to another option ...

You can continue to use the rotation technique as you do, but then add some indentation to the bottom of the green part, and then use the negative edge of the bottom to raise the footer up and diagonally. If you then set the footer relatively, it should sit above the top of the green so you don't see the diagonal line.

I tested this on the actual site and found that I need to add a container add-on inside the footer-top and put a negative field on the footer-top . Otherwise, the gasket will cause a gap in the lower body.

It is difficult to describe in words, so here is a fragment.

 #footer-top { color: #fff; padding: 35px 0 15px; transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-webkit-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-moz-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-o-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-ms-transform: rotate(2deg) scale(1) skew(3deg) translate(0px); margin-bottom: -20px; /* Added */ } /* Added */ #footer-top .container { padding-bottom: 20px; } #footer-space { padding: 0 0 6px; } #footer-top2 { color: #fff; background-color: rgba(20, 122, 188, 0.5); background: rgba(20, 122, 188, 0.5); color: rgba(20, 122, 188, 0.5); padding: 6px 0 12px; height: 2px; transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-webkit-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-moz-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-o-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-ms-transform: rotate(358deg) scale(1) skew(0deg) translate(0px); } #footer-top3 { color: #fff; background-color: rgba(128, 185, 46, 0.7); background: rgba(128, 185, 46, 0.7); color: rgba(128, 185, 46, 0.7); transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); -webkit-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); -moz-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); -o-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); -ms-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px); } #footer-bottom { color: #808080; background-color: #2D2D2D; font-size: 0.916em; padding: 30px 0; border-top: 1px solid #000; box-shadow: 0 4px 4px rgba(0,0,0,0.2) inset; position: relative; /* Added */ } 

 <div id="footer-top2"></div> <div id="footer-space"></div> <div id="footer-top3"> <div id="footer-top"> <div class="container clearfix"> <div class="one-fourth"> <div class="widget twitter-widget"> <h3>Últimos Tweets</h3> <div class="tweet"></div> </div> </div> <div class="one-fourth"> <div class="widget twitter-widget"> <h3> Facebook Feed</h3> <div class="tweet"></div> </div> </div> <div class="one-fourth"> <div class="widget twitter-widget"> <h3>Fotos en Instagram</h3> <div class="tweet"></div> </div> </div> <div class="one-fourth column-last"> <div class="widget contact-info"> <h3>Contacto</h3> <div>address here </div> </div> </div> </div> </div> </div> <div id="footer-bottom"> <div class="container clearfix"> Footer content </div> </div> 

Answer 2

You can try to achieve this with a css gradient. I am doing something similar on my splashpage:

http://agency89ninety.com

The corner background on the above site is pure CSS3 gradients (with fall limbs)

This is done by creating a gradient starting at 0% with the color GRAY, ending at 50% with the color GRAY, and then starting at another gradient at 50% with the color DARKGREY and ending with 100% with the color DARKGREY.

Basically you cheat the system. This is technically a gradient, but looks like two solid colors that meet in the middle and at an angle.

Take a look at this site to learn more about css gradient properties:

http://www.css3files.com/gradient/