Incomplete borders around div
Question
I am looking for a way to create an incomplete square with borders with some text and a background with pure css. Here is what I am trying to achieve:
My initial idea is to create the shape based on three shapes and then colorize the borders accordingly:
But I am a bit concerned about the adaptive version - scaling three shapes. So maybe a better idea, anyone?
5 answers
solution1
25 2016-01-27 06:54:05
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/
solution2
22 2016-01-27 06:53:25
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>
solution3
18 ACCPTED 2016-01-27 10:12:59
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>
solution4
10 2016-01-27 07:55:09
Well, go with the above answers, I recommend using pseudo elements to achieve this effect.
But There is another way to accomplish this without using pseudo-elements.
Here is how you should do this.
.row{display:table;table-layout:fixed;} .col{display:table-cell;} .row{width:250px; margin: auto;} .mid.row > .col{ height: 100px; } .col{ text-align: center;} .top.col, .bottom.col{ border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; height: 50px; } .bottom.col{ border-top: 0; border-bottom: 1px solid black; } .mid.row > .col{ border-left: 1px solid black; border-right: 0; vertical-align: middle; text-align: right; } .mid.row > .col span{ margin-right: -30px; max-width: 300px; }
<div class="row"> <div class="top col"></div> </div> <div class="mid row"> <div class="col"> <span>Hey you can achieve this without using pseudo elements :)</span> </div> </div> <div class="row"> <div class="bottom col"></div> </div>
solution5
0 2020-07-26 10:32:09
We can do this with linear-gradient s. No SVG, no pseudo-element. I used some variables to control everything easily.
.container { /* you can change these variables */ --border-color: #000; --border-width: 2px; --space: 100px; width: 200px; height: 300px; position: relative; background: linear-gradient(var(--border-color), var(--border-color)) 0 0/var(--border-width) 100%, linear-gradient(var(--border-color), var(--border-color)) 0 100%/100% var(--border-width), linear-gradient(var(--border-color), var(--border-color)) 0 0/100% var(--border-width), linear-gradient(var(--border-color), var(--border-color)) 100% 0/var(--border-width) calc(50% - (var(--space) / 2)), linear-gradient(var(--border-color), var(--border-color)) 100% 100%/var(--border-width) calc(50% - (var(--space) / 2)); background-repeat: no-repeat; } .content { position: absolute; width: 200px; top: 50%; transform: translateY(-50%); right: -100px; background: yellow; }
<div class="container"> <div class="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.