How to create a div with a diagonal (or angled) top line
First I thought this could be done with CSS triangles, but I can't quite work out how to make a downward right pointing triangle be 100% width, so I moved on to another option...
You could keep using the rotation technique as you are doing, but then add some padding to the bottom of the green part, and then use a negative margin-bottom to bring the footer back up and over the diagonal. If you then set the footer to relative, it should sit over the top of the green so you won't see the diagonal line.
I tested this on the actual site and found that I need to add the padding to the container inside footer-top and put the negative margin on footer-top. Otherwise, the padding would cause a gap at the bottom of the body.
Hard to describe in words, so here's the snippet.
#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>Adding diagonal borders to bottom/top of div element?
You could use SVG for this. Below is a short example, which can probably be simplified, I use SVG very rarely and am not that proficient with it.
body { background-image: url(http://i.imgur.com/XxGffrU.jpg); background-size: cover; background-position: center bottom; margin: 0;}#your_div { position: relative; top: 100px; margin-top: 100px; width: 100%; height: 100px; background: white;}#back { position: relative; top: -99px; width: 100%; height: 100px;}<div id="your_div"> <svg id="back" viewBox="0 0 100 10" preserveAspectRatio="none"> <path d="M 0,4 L 45,8 50,5 55,8 100,4 100,10 0,10 z" style="fill: white;"></path> <path d="M 0,0 L 45,8 55,8 100,0 100,10 0,10 z" style="fill: rgba(255,255,255,0.5)"></path> </svg></div>Diagonal line through div or span
Is first fiddle as example with image in background instead not good enough?
http://jsfiddle.net/zw3Ve/410/
.line {
display:inline-block;
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
background:url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
background-size:100% 100%;
}
CSS for slant diagonal line
That's the CSS and HTML code for the slanted black line:
.borderdraw { border-style:solid; height:0; line-height:0; width:0;}<div style="position: relative; width: 100px; height: 100px;"><div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 0px 0px 65px 87px;" class="borderdraw"><!-- --></div><div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(255, 240, 240); border-width: 0px 0px 64px 85px;" class="borderdraw"><!-- --></div> </div>draw diagonal lines in div background with CSS
You can do it something like this:
<style>
.background {
background-color: #BCBCBC;
width: 100px;
height: 50px;
padding: 0;
margin: 0
}
.line1 {
width: 112px;
height: 47px;
border-bottom: 1px solid red;
-webkit-transform:
translateY(-20px)
translateX(5px)
rotate(27deg);
position: absolute;
/* top: -20px; */
}
.line2 {
width: 112px;
height: 47px;
border-bottom: 1px solid green;
-webkit-transform:
translateY(20px)
translateX(5px)
rotate(-26deg);
position: absolute;
top: -33px;
left: -13px;
}
</style>
<div class="background">
<div class="line1"></div>
<div class="line2"></div>
</div>
Here is a jsfiddle.
Improved version of answer for your purpose.
Slanted diagonal line in html or css?
Based on CSS3 linear-gradients solution except that the angle is not hard coded:
table:nth-of-type(1) td { background-image: linear-gradient( to top right, white 48%, black, white 52% );}table:nth-of-type(2) td { background-image: linear-gradient( to top right, papayawhip calc(50% - 1px), black, papayawhip calc(50% + 1px) );}/* for testing */table { border-collapse: collapse; margin-top: 1em; margin-bottom: 1em;}td:nth-child(odd) { width: 10em;}td:nth-child(even) { width: 20em;}<table border="1"> <tbody> <tr> <td>Narrow</td> <td>Wide</td> </tr> <tr> <td>Narrow</td> <td>Wide</td> </tr> </tbody></table><table border="1"> <tbody> <tr> <td>Narrow</td> <td>Wide</td> </tr> <tr> <td>Narrow</td> <td>Wide</td> </tr> </tbody></table>How do I draw a Diagonal div?
You could use CSS3 transform skewY() function with positive value for the parent and negative value for the child wrapper element to achieve the effect.
.parent {
-webkit-transform: skewY(-5deg);
-moz-transform: skewY(-5deg);
-ms-transform: skewY(-5deg);
-o-transform: skewY(-5deg);
transform: skewY(-5deg);
}
.parent > .child {
-webkit-transform: skewY(5deg);
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform: skewY(5deg);
transform: skewY(5deg);
}
WORKING DEMO.
From the spec:
skewY()specifies a 2D skew transformation along the Y axis by the
given angle.
It's worth noting that the using skewY() won't change the width of the transformed elements.
Also mind the child selector. It's better to use direct child selector .parent > .child rather than descendant selector to negate the transform on the child element.
How to draw diagonal lines with css
You can achieve the desired effect by using just one single div. Check the DEMO.
div{
border:1px solid gray;
width:28px;
height:28px;
position:relative;
}
div:after{
content:"";
position:absolute;
border-top:1px solid red;
width:40px;
transform: rotate(45deg);
transform-origin: 0% 0%;
}
Note: please add the vendor prefix for older browsers i.e. -moz, -webkit.
creating a responsive diagonal line in element
You can do this in multiple ways.
1) background image
1.1) SVG
You can create an svg direct as inline code and use it for drawing the line. Using this you can achiev nice effects like shadow, gradient, dotted line, ... and much more. It is also posible to use a svg inside the css background-image element.
jsfiddle
<svg style='width: 100%; height: 100%;'>
<line x1="0" y1="100%" x2="100%" y2="0"
style="stroke:rgb(0,0,0);stroke-width:1"/>
</svg>
1.2) fix image (png, jpg, ...)
You can also use a simple image as background image on full div.
jsfiddle
2) create linear background gradient
jsfiddle
.testDiv {
width: 300px;
height: 300px;
background:linear-gradient(to bottom right, transparent calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%);
}
How does this works?
- you define a gradient from top left to bottom right
- the color is transparent until 50% - 1 px and again transparent from 50% to end
(read more here)
3) rotated inner div (only on square divs)
jsfiddle
when resizing the testDiv, the line should stay a diagonal.
.testDiv{
width: 600px;
height: 600px;
background-color: gray;
}
.lineDiv {
position: relative;
top: 29%;
left: 29%;
width: 142%;
height: 142%;
border-left: solid thin blue;
transform: rotate(45deg);
}
How does this works?
- the outer div has a size (may be dynamic too)
- the inner div has position relative and width and height are set to 142%
- top and left are set to 29% (28.7)
-> 142 = sqrt(100^2 + 100^2) (see phytagoras)
CSS diagonal lines - how to fit into its parent element?
You can draw the lines with pseudo elements.
.diagonal-container { border: 1px solid #000; width: 400px; height: 400px; margin: 0 auto; position: relative; overflow: hidden;}
.diagonal-container:before { border-top: 1px solid #ff00ff; content: ''; position: absolute; top: 0; left: 0; right: -50%; transform: rotate(45deg); transform-origin: 0 0;}
.to-right:before { right: 0; left: -50%; transform: rotate(-45deg); transform-origin: 100% 0;}<div class="diagonal-container to-right"></div>
<div class="diagonal-container to-left"></div>
<div class="diagonal-container to-right"></div>Related Topics
Distorted Spacing Between Div Elements After Sorting with Jqui_Sortable
Do Inline Elements Establish a Line Box for Their Content
Give Space Above and Below a Div
Wobbly CSS Animation with Border-Radius in Internet Explorer
Text Color Change on Hover Over Button
CSS Background Color Keyframes Animation
Remove Conflicting Styling - Bootstrap & Google Custom Search
Internet Explorer 11 Rgba Refuses to Work
Preventing Hover Event of a Div Triggering on Parent Div
How Does This Print Stylesheet Work
How to Manage My CSS as Modx Resources
Rotate Text and Shrink Its Container to the New Width
Draw Half Circle with CSS or Svg
Setting a Cursor [With CSS] on an Image Map Area
Css: Problems When Using Object-Fit and Transform Together on Webkit