Corner design in css

Question

I have this image and I wonder how to get this design. How to create selected borders in CSS and html.

Answer 1

Use several pseudo-elements and create triangles with their borders, then position them absolutely to sit where you want.

Additional Information About Pseudo Elements

Example

div{
    background:#999;
    height:300px;
    position:relative;
    width:100px;
}
div::before,div::after{
    content:"";
    left:100px;
    position:absolute;
}
div::before{
    border-bottom:20px solid #333;
	border-right:20px solid transparent;
    top:0;
}
div::after{
    border-top:20px solid #333;
	border-right:20px solid transparent;
    bottom:0;
}

<div></div>

Run codeHide result