This demo demonstrates how to connect two adjascent <div>s with
something that mimicks border-radius behavior. The key is using the
:before and :after selectors to add a svg background image that
has the rounded corners.
Last active
December 26, 2015 13:49
-
-
Save deanmalmgren/7161192 to your computer and use it in GitHub Desktop.
curved intersection of divs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg baseProfile="full" height="10" version="1.1" width="10" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <path fill="white" stroke="white" stroke-width="1" d="M9,5A4,4 0 0,0 5,1L5,0L10,0L10,5Z"/> | |
| <path fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="square" d="M9,5A4,4 0 0,0 5,1"/> | |
| </svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="left"> | |
| This is the content on the left side | |
| <div class="fancy-join"> | |
| <div class="stroke"></div> | |
| </div> | |
| </div> | |
| <div id="right"> | |
| This is the content on the right side | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #eee; | |
| } | |
| #left, #right { | |
| margin: 10px; | |
| width: 300px; | |
| float: left; | |
| padding: 0.5em; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| background-color: white; | |
| } | |
| #left { | |
| margin-top: 80px; | |
| margin-right: 0px; | |
| padding-right: 0em; | |
| border-right: none; | |
| border-top-right-radius: 0px; | |
| height: 1em; | |
| border-bottom-right-radius: 0px; | |
| } | |
| #right { | |
| margin-left: 0px; | |
| height: 200px; | |
| } | |
| .fancy-join{ | |
| position:relative; | |
| width:0; | |
| height:0; | |
| left:100%; | |
| top:-1.5em; | |
| z-index:2; | |
| } | |
| .fancy-join .stroke{ | |
| position:absolute; | |
| top: -2px; | |
| width:1px; | |
| height:2.1em; | |
| background-color:#fff; | |
| } | |
| .fancy-join .stroke:after{ | |
| content:""; | |
| position:absolute; | |
| left:-9px; | |
| top:-10px; | |
| background-image:url("circle-bottom-right.svg"); | |
| background-repeat:no-repeat; | |
| z-index:4; | |
| width:10px; | |
| height:10px; | |
| } | |
| .fancy-join .stroke:before{ | |
| content:""; | |
| position:absolute; | |
| left:-9px; | |
| bottom: -8px; | |
| background-image:url("circle-top-right.svg"); | |
| background-repeat:no-repeat; | |
| z-index:4; | |
| width:10px; | |
| height:10px; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment