Create an arrow in css3 - html

Question

I know how to create arrows outside the div by using the psedo class but I need to create a arrow inside the div as shown below
How can I get this?

Answer 1

No need to use extra elements, this can be done entirely using CSS3:
background-color: gray;
background-image:
linear-gradient(135deg, transparent 75%, #000 75%), /*right side of triangle*/
linear-gradient(45deg, transparent 75%, #000 75%) /*left side of triangle*/;
background-position: 30px 0, 0 0;
background-repeat: no-repeat;
background-size: 30px 30px;
Demo (with vendor-prefixes: http://jsfiddle.net/rLZkf/1/).
Explanation of a this triangle technique
As seen in the image below source, CSS supports linear colour gradients using a simple syntax.
With some imagination, you can see a triangle in the previous image. The colour blends at the diagonal though. So, we set explicit colour stop locations. When these locations are equal, there's no visual blending any more, and you get a solid triangle.
It's time to introduce a triangle:
background-image: linear-gradient(45deg, transparent 50%, black 50%);
The gradient starts at the bottom-left corner, and ends at the upper-right corner due to the angle of 45°. The colour stop location is defined to be 50%, so the bottom-left part of the triangle is transparent, and the other half is black. To get a different triangle, use an angle of 135°. Here's an image with both angles:
At this point, we know how to create a rectangular triangle. To get further, we need to be able to create a triangle where the hypotenuse is placed vertically or horizontally. To achieve this, we join two triangles. CSS3 introduces support for multiple backgrounds. This feature is used to construct the triangle.
/* Create triangles */
background-image:
linear-gradient(135deg, transparent 75%, #000 75%), /*right side of triangle*/
linear-gradient(45deg, transparent 75%, #000 75%) /*left side of triangle*/;
/* Move one of the triangles to the right */
background-position: 30px 0, 0 0;
/* Don't repeat the background image (remove this to see what would happen) */
background-repeat: no-repeat;
/* Define the size of the triangle */
background-size: 30px 30px;
In the previous CSS code, one can see that I'm using 75% as a colour stop location (instead of 50%). This choice does not matter, the final shape of the triangle is determined by the values of the gradient's colour stop location, background-position and background-size.
**Note: I left out the vendor prefixes in the explanation. To use this technique, you have to add the vendor-prefixes (as seen in the demo).
Relevant documentation
Multiple CSS backgrounds
linear-gradient
background-position
background-size
background-repeat

Answer 2

Have a look there I think :
http://css-tricks.com/examples/ShapesOfCSS/

Answer 3

..........................
Now used to
after: pseudo-class
as like this
.some{
width:100px;
height:100px;
background:red;
position:relative;
overflow:hidden;
}
.some:after{
content:'';
position:absolute;
left:10px;
top:-11px;
z-index:0;
width:25px;
height:25px;
background:green;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
}
live demo

Answer 4

Shortest and most browser-compatible solution:
css:
​div{
position:relative;
height: 200px;
width: 200px;
background-color: gray;
}
div::after{
content: '';
border: solid 15px transparent;
border-top-color:black;
position:absolute;
top:0;
left: 30px;
}
Demo:
http://jsfiddle.net/7bP9q/