Sunamena Posted January 25, 2017 Share Posted January 25, 2017 Hello. I want a diagonal border.Starting from HERE HERE \ CONTENT / TO HERE TO HERE So the math:Top: 0% (first here) 100% (second here)Bottom: 10% (first to here) 90% (second to here).In short i want to achieve this. SHORT HTML<div id="ONE"> CONTENT</div><div id="TWO"> CONTENT</div>SHORT CSS #ONE { width: 100%; border: 2px solid black;} #TWO { width: 80%; margin:auto;} So, i want div ONE to have a diagonal line towards div TWO. I have been trying and looking on Google, but did not find a solution to this problem.Thanks in advance. =D Link to comment Share on other sites More sharing options...
Ingolme Posted January 25, 2017 Share Posted January 25, 2017 That's beyond the capabilities of CSS, CSS just works with rectangular boxes and the optional rounded borders. You could draw the border using SVG and use that as a background image. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 26, 2017 Share Posted January 26, 2017 WRONG! Ever heard of css3 skew()? <!DOCTYPE html> <html> <head> <style> div.myDiv { width:300px; height: 100px; -ms-transform: skew(20deg,10deg); /* IE 9 */ -webkit-transform: skew(20deg,10deg); /* Safari */ transform: skew(10deg,0deg); /* Standard syntax */ border-left:1px solid #000; position:relative; /**/right: -9px; } div.myDiv div { width: 280px; height: 100px; border-right:1px solid #000; -ms-transform: skew(20deg,10deg); /* IE 9 */ -webkit-transform: skew(20deg,10deg); /* Safari */ transform: skew(-20deg,0deg); /* Standard syntax */ position:relative; right: -19px; } </style> </head> <body> <div class="myDiv"> <div> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
Ingolme Posted January 26, 2017 Share Posted January 26, 2017 Who else have I heard yelling "wrong!"? I do know about it, it just slipped my mind. The major drawback of this approach that the content inside the container ends up skewed as well. You'll need to add extra elements or pseudo elements to account for the top and bottom borders. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 26, 2017 Share Posted January 26, 2017 Not a major problem add wrapping container, not affected by skewing, the skewed elements can position: absolute as they are, or by using content property. Link to comment Share on other sites More sharing options...
Sunamena Posted February 2, 2017 Author Share Posted February 2, 2017 Skew did not do the trick for me (since it did not seem to be responsive). And i did not try SVG.However, i managed to do it with this background: header { background: linear-gradient(130deg, rgba(0,0,0,0) 93%,rgba(0,0,0,1) 93%,rgba(0,0,0,1), rgba(0,0,0,1) 93.25%,rgba(0,0,0,0) 93.25%, rgba(0,0,0,1) 150%), linear-gradient(50deg, rgba(0,0,0,0) 6.75%,rgba(0,0,0,1) 6.75%,rgba(0,0,0,1) 7%,rgba(0,0,0,0) 7%); /* background: right -> and left <- */ But i can not seem to figure out how to fill the gap between the two lines as white (rgba(255,255,255,0.8))Can anyone here help me? =DIf it is to much effort, i can probably simply use a background image =P Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now