How to create 90 ° "edges" in div

Question

How to create 90 ° "edges" in div

Navigation

#1 by (3 votes)

1

Is it possible to create 90 ° borders at the tip of% s by CSS? Here is an example:

html css

asked by anonymous 24.08.2017 / 16:35

1 answer

Doubt - Function to clear img with javascript does not work Generate files with all permissions

score 3 · Accepted Answer

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>