I need to create an arrow inside a div. I have created the arrow but need to get the visul effect with border as shown as below
Demo of the tried sample http://jsfiddle.net/rLZkf/4/
div {
margin: 20px;
height: 200px;
width: 200px;
background-color: #c1c1c1;
border: #000 solid 2px;
background-image: -webkit-linear-gradient(135deg, transparent 75%, #fff 75%), -webkit-linear-gradient(45deg, transparent 75%, #fff 75%);
background-image: -moz-linear-gradient(135deg, transparent 75%, #fff 75%), -moz-linear-gradient(45deg, transparent 75%, #fff 75%);
background-image: -ms-linear-gradient(135deg, transparent 75%, #fff 75%), -ms-linear-gradient(45deg, transparent 75%, #fff 75%);
background-image: -o-linear-gradient(135deg, transparent 75%, #fff 75%), -o-linear-gradient(45deg, transparent 75%, #fff 75%);
background-image: linear-gradient(135deg, transparent 75%, #fff 75%), linear-gradient(45deg, transparent 75%, #fff 75%);
background-position: 30px 0, 0 0;
background-repeat: no-repeat;
background-size: 30px 30px;
}
<div></div>
You can use CSS3 rotate property for this. Write like this:
div {
margin:20px;
height: 200px;
width: 200px;
background-color: #c1c1c1;
border:#000 solid 2px;
position:relative;
}
div:after{
content:'';
width:20px;
height:20px;
background:#fff;
position:absolute;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
top:-11px;
left:10px;
border-right:#000 solid 2px;
border-bottom:#000 solid 2px;
}
Check this http://jsfiddle.net/rLZkf/6/
UPDATED
Check this http://jsfiddle.net/rLZkf/9/