HTML / CSS对话框 - 试图在左侧获得箭头

Question

我在HTML / CSS中使用了以下图像，但现在除了左上角的箭头之外我需要相同的图像。 也是一个更长的箭头（但我确定我可以解决这个问题。）

我在这里创造了一个小提琴http://jsfiddle.net/bnzuug5b/4/

然而，箭头（左侧）的方向错误。

以下是我一直在使用的CSS：

#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;
}

非常感谢任何帮助 - 在网站上使用：http://www.musician.dating

THX

Answer 1

在您的css中找到以下id

#chatCenterMemberInfoPopOutContainerDIV:after, #chatCenterMemberInfoPopOutContainerDIV:before 

并更改

border-left-color: #f2f2f2;

是：

 border-right-color: #f2f2f2;

FIDDLE

Answer 2

要让箭头朝向左侧，您需要将top和bottom＆{39} border-color设置为transparent并提供color } border-right。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<div id="chatCenterMemberInfoPopOutContainerDIV"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

创建一个三角形的div并提供边距。 试试这个enter code here http://jsfiddle.net/sathyanaga/fyt4fagL/`