É possível criar bordas 90° na ponta das div
's pelo CSS? Segue exemplo:
1 Resposta
Usando Before
e After
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
}
div:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -10px;
left: -10px;
border-top: 1px solid #000;
border-left: 1px solid #000;
}
div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -10px;
right: -10px;
border-top: 1px solid #000;
border-right: 1px solid #000;
}
span:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
left: -10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
span:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
right: -10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
<div><span></span></div>