Question

我正在使用CSS在下拉菜单容器上放置一个小箭头。

#nav {
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    padding: 20px;
    border: 1px solid #f00;
    background: #fff;
}
#nav:after,
#nav:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 100%;
    left: 20px;
    border: solid transparent;
    pointer-events: none;
}
#nav:before {
    border-color: rgba(0, 255, 255, 0);
    border-bottom-color: #f00;
    border-width: 8px;
    margin-left: -8px;
}
#nav:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 7px;
    margin-left: -7px;
}

但是，我希望箭头从右侧对齐一定数量的像素。在#nav:after, #nav:before课程中，我将left: 20px更改为right: 20px，但这使得箭头的边框在左侧太厚而在右侧不可见：http://jsfiddle.net/vx2Lpt19/1/

当从右侧对齐20像素时，有人可以帮助我让箭头看起来正确吗？

Answer 1

尝试将margin-left声明更改为margin-right和#nav:before下的#nav:after。

以下是此次更改后的样子：http://jsfiddle.net/o4efcsk8/

Answer 2

试试这个：

#nav:before {
border-color: rgba(0, 255, 255, 0);
border-bottom-color: #f00;
border-width: 9px;
margin-right: -2px;
}

＆＃13;

body {
    background: #ccc;
}
#nav {
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    padding: 20px;
    border: 1px solid #f00;
    background: #fff;
}
#nav:after,
#nav:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	bottom: 100%;
	right: 20px;
	border: solid transparent;
	pointer-events: none;
}
#nav:before {
	border-color: rgba(0, 255, 255, 0);
	border-bottom-color: #f00;
	border-width: 9px;
	margin-right: -2px;
}
#nav:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 7px;
	margin-left: -7px;
}

＆＃13;

<div id="nav">
    content
</div>

＆＃13;

Answer 3

老实说，伪元素的现有边缘在我修饰时似乎没什么用。

然而，删除它们只是应用一个-1px边距似乎可以解决问题。

＆＃13;

body {
  background: #ccc;
}
#nav {
  position: relative;
  width: 200px;
  height: 200px;
  top: 20px;
  padding: 20px;
  border: 1px solid #f00;
  background: #fff;
}
#nav:after,
#nav:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  bottom: 100%;
  right: 20px;
  border: solid transparent;
  pointer-events: none;
}
#nav:before {
  border-color: rgba(0, 255, 255, 0);
  border-bottom-color: #f00;
  border-width: 8px;
  margin-right: -1px;
}
#nav:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 7px;
}

＆＃13;

<div id="nav">
  content
</div>

＆＃13;

CSS箭头在与右侧对齐时出现故障

3 个答案: