html - style - Bordes incompletos alrededor de div
html form border (4)
Bueno, vaya con las respuestas anteriores, recomiendo usar pseudo elementos para lograr este efecto.
Pero hay otra manera de lograr esto sin usar pseudo-elementos.
Aquí es cómo debe hacer esto.
.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>
Estoy buscando una manera de crear un cuadrado incompleto con bordes con algún texto y un fondo con css puro. Esto es lo que estoy tratando de lograr:
Mi idea inicial es crear la forma basada en tres formas y luego colorear los bordes en consecuencia:
Pero estoy un poco preocupado por la versión adaptativa: escalar tres formas. Así que tal vez una mejor idea, alguien?
Este enfoque le permite:
- agregue cualquier contenido y los bordes se adaptarán alrededor de él sin importar la altura o el ancho del contenido
- admite un fondo transparente y se puede mostrar sobre una imagen o colores no planos
- no añade ningún elemento extraño
Se basa en 2 pseudo elementos absolutamente posicionados y un div . El espacio entre el contenido y los bordes se controla mediante el relleno en el 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>
Puedes hacerlo con :before y :after pseudo elementos.
Diseño completo 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>
o 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>
Puedes hacerlo con css pseudo ::after y ::before , algo como esto
.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;
}
Manifestación
Anchura y altura fijas: https://jsfiddle.net/nikhilvkd/qt5ne3yw/
Anchura y altura automáticas: https://jsfiddle.net/nikhilvkd/0v3k8rv8/2/