CODEWITHSUNDEEP
htmlcss
Adam
Adam

Reputation: 20952

HTML/CSS Dialog - Trying to get Arrow on Left Side

I have the following image working in HTML/CSS but now I need the same except with the arrow on the upper left side. Also a longer arrow (but I'm sure I can figure that out).

enter image description here

I've create a fiddle here http://jsfiddle.net/bnzuug5b/4/

However the arrow (on the left) is pointing the wrong way.

Below is the CSS I've been working with:

#chatCenterMemberInfoPopOutContainerDIV {
border-radius: .1875em;
z-index: 5;
position: absolute;
box-shadow: 0 0 0 1px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 2px -2px rgba(0,0,0,0.2),0 0 1px 1px rgba(0,0,0,0.15);
background-repeat: repeat-x;
background-position: 0 0;
background-image: linear-gradient(to bottom,rgba(255,255,255,0.7) 0,rgba(255,255,255,0) 100%);
background-color: #e1e1e1;
width: 140px;
height: 80px;
left: 50px;
top: 50px;
display: block;
}

#chatCenterMemberInfoPopOutContainerDIV:before {
border-left-color: #aaa;
border-width: 5.5px;
margin-top: -1.5px;
}

#chatCenterMemberInfoPopOutContainerDIV:after, #chatCenterMemberInfoPopOutContainerDIV:before {
border: 4px solid transparent;
border-left-color: #f2f2f2;
position: absolute;
content: '';
right: 100%;
top: 9px;
}

#chatCenterMemberInfoPopOutContainerDIV:after, #chatCenterMemberInfoPopOutContainerDIV:before {
border: 4px solid transparent;
border-left-color: #f2f2f2;
position: absolute;
content: '';
right: 100%;
top: 9px;
}

Any assistance would be greatly appreciated - used on site: http://www.musician.dating

thx

Upvotes: 1

Views: 1129

Answers (3)

Weafs.py
Weafs.py

Reputation: 22998

To get the arrow facing to the left side you need to set top and bottom's border-color to transparent and give a color to border-right.

#chatCenterMemberInfoPopOutContainerDIV {
  border-radius: .1875em;
  z-index: 5;
  position: relative;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 4px 2px -2px rgba(0, 0, 0, 0.2), 0 0 1px 1px rgba(0, 0, 0, 0.15);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0) 100%);
  background-color: #e1e1e1;
  width: 140px;
  height: 80px;
  left: 50px;
  top: 50px;
}
#chatCenterMemberInfoPopOutContainerDIV:before,
#chatCenterMemberInfoPopOutContainerDIV:after {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 14px solid #F5F5F5;
  position: absolute;
  content: '';
  top: 15px;
  left: -14px;
}
#chatCenterMemberInfoPopOutContainerDIV:before {
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 15px solid #CECECE;
  top: 13px;
  left: -15px;
}
<div id="chatCenterMemberInfoPopOutContainerDIV"></div>

Upvotes: 1

Pavan Kumar Upadhyayula
Pavan Kumar Upadhyayula

Reputation: 9

Create a div with triangle shape and provide the margins. Try this enter code herehttp://jsfiddle.net/sathyanaga/fyt4fagL/`

Upvotes: 1

jmore009
jmore009

Reputation: 12933

Find the following id's in your css

#chatCenterMemberInfoPopOutContainerDIV:after, #chatCenterMemberInfoPopOutContainerDIV:before

and change

border-left-color: #f2f2f2;

to be:

 border-right-color: #f2f2f2;

FIDDLE

Upvotes: 1

Related Questions