CODEWITHSUNDEEP
htmlcsspseudo-class
Sowmya
Sowmya

Reputation: 26969

Create an arrow in css3

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

enter image description here

How can I get this?

Upvotes: 0

Views: 839

Answers (4)

Puyol
Puyol

Reputation: 3109

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/

Upvotes: 1

Rob W
Rob W

Reputation: 349042

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

Upvotes: 7

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

..........................

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

Upvotes: 1

haltabush
haltabush

Reputation: 4528

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

Upvotes: 7

Related Questions