Incomplete borders around div
You can do this with :before
and :after
pseudo elements
Complete design Fiddle
.square {
width: 200px;
height: 300px;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
position: relative;
}
.square:before, .square:after {
content: "";
height: 20%;
position: absolute;
right: 0;
border-right: 1px solid gray;
}
.square:before {
bottom: 0;
}
<div class="square"></div>
or SVG
line {
stroke: #6996FB;
stroke-width: 2;
}
svg {
overflow: visible;
}
button {
padding: 10px 50px;
border: none;
color: white;
margin-right: 10px;
margin-top: 15px;
}
.btn-blue {
background: #5D8CFF;
}
.btn-green {
background: #33F1D9;
}
h3 {
margin: 0;
}
<svg width="250" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="1" x2="250" y2="1"></line>
<line x1="0" y1="300" x2="250" y2="300"></line>
<line x1="1" y1="1" x2="1" y2="300"></line>
<line x1="249" y1="0" x2="249" y2="70"></line>
<line x1="249" y1="230" x2="249" y2="300"></line>
<foreignobject x="60" y="90" width="400" height="180">
<body xmlns="http://www.w3.org/1999/xhtml">
<h3>Lorem ipsum dolor sit <br> amet, consectetur adipisicing elit. Suscipit</h3>
<button class="btn-blue">Btn 1</button><button class="btn-green">Btn 2</button>
</body>
</foreignobject>
</svg>
This approach allows you to:
- add any content and the borders will adapt around it regardless of height or width of the content
- support transparent background and can be displayed over an image or non plain colors
- doesn't add any unsemantic elements
It relies on 2 absolutely positioned pseudo elements and one div
. The spacing between the content and the borders is controlled by the padding on the div :
div{
position:relative;
display:inline-block;
padding:50px 100px;
border-left:1px solid #000;
text-align:center;
}
div:before, div:after{
content:'';
position:absolute;
right:50%; left:0;
height:50px;
border-right:1px solid #000;
}
div:before{
top:0;
border-top:1px solid #000;
}
div:after{
bottom:0;
border-bottom:1px solid #000;
}
body{background:url('http://i.imgur.com/3IXm5qm.jpg');background-size:cover;}
<div>
<h2>This is a very long title on<br/> 2 lines</h2>
<button>Button</button>
<p>Some text</p>
</div>
You can do with css pseudo ::after
and ::before
, something like this
.incomplete-box{
border: solid 1px #fff;
border-right: none;
width: 100px;
height: auto;
position: relative;
}
.incomplete-box::after,
.incomplete-box::before{
content: '';
position: absolute;
height: 30%;
width: 1px;
background-color: #fff;
right: 0;
}
.incomplete-box::after{
top: 0;
}
.incomplete-box::before{
bottom: 0;
}
Demo
Fixed width and height : https://jsfiddle.net/nikhilvkd/qt5ne3yw/
Auto width and height: https://jsfiddle.net/nikhilvkd/0v3k8rv8/2/