CODEWITHSUNDEEP
jquerycss
user122935
user122935

Reputation: 75

how to create a pointed triangle on the left div

I would like to ask how to create a pointed div to display the comments of the users. The pointed div should look like this :

enter image description here

Do you have any idea? thanks

It should appear like this but just to put the triangle on the left side not on the top.

#pointed {
position: relative;
margin: 0 auto;
width: 50px;
height: 50px;
padding: 4px;
color: white;
background-color: rgba(0,0,0,.8);
}

#pointed:after,
#pointed::after {
position: absolute;
top: -5px;
left: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 5px rgba(0,0,0,.8);
border-left: solid 5px transparent;
border-right: solid 5px transparent;
}

Upvotes: 2

Views: 5824

Answers (3)

misterManSam
misterManSam

Reputation: 24692

This example will scale :)

Have a fiddle!

Example with scale - triangle centered

#pointed {
  position: relative;
  margin: 0 auto;
  width: 50px;
  padding: 4px;
  color: white;
  background-color: rgba(0, 0, 0, .8);
  min-height: 40px;
}

#pointed:before {
  position: absolute;
  top: 50%;
  left: -5px;
  content: '';
  width: 0;
  height: 0;
  margin: -5px 0 0;
  border-right: solid 5px rgba(0, 0, 0, .8);
  border-bottom: solid 5px transparent;
  border-top: solid 5px transparent;
}
<div id="pointed">hello</div>

Upvotes: 1

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

The triangle is generated by the border properties, so to make it point left you need to change the CSS to:

#pointed:after,
#pointed::after {
    position: absolute;
    top: 5px;
    left: -5px;
    content: '';
    width: 0;
    height: 0;
    border-right: solid 5px rgba(0,0,0,.8);
    border-bottom: solid 5px transparent;
    border-top: solid 5px transparent;
}

http://jsfiddle.net/LN6zG/

For more information on how the triangles are generated take a look here http://css-tricks.com/snippets/css/css-triangle/

Upvotes: 8

Kheema Pandey
Kheema Pandey

Reputation: 10265

Here is the relevant Code and Result . Check the DEMO.

#pointed {
position: relative;
margin: 0 auto;
width: 50px;
height: 50px;
padding: 4px;
color: white;
background-color: rgba(0,0,0,.8);
}

#pointed:after{
position: absolute;
left:-10px;
top: 18px;
content: '';
width: 0;
height: 0;
border-right: solid 10px rgba(0,0,0,.8);
border-bottom: solid 10px transparent;
border-top: solid 10px transparent;
}

Upvotes: 1

Related Questions