Corner design in css [duplicate]

问题

This question already has an answer here:

Ribbon with a “3D” effect (1 answer)

Closed 4 years ago.

I have this image and I am wondering how to get this design. How to design the highlighted borders in CSS and html.

回答1:

Use a couple of pseudo elements and create triangles with their borders then position them absolutely to sit where you want.

More information on 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>

来源：https://stackoverflow.com/questions/29803400/corner-design-in-css