How to create 90° "edges" in the div

Asked

Viewed 94 times

1

It is possible to create 90° edges on the tip of div's by CSS? Follow example: inserir a descrição da imagem aqui

html css

1 answer

3


Using Before and 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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.