html5 - Corner design in css -


this question has answer here:

i have image , wondering how design. how design highlighted borders in css , html.

enter image description here

use couple of pseudo elements , create triangles borders position them absolutely sit 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>


Comments

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -