Question

我有一个css箭头顶部，我想在div的顶部显示，如下所示：

问题是，箭头位于div ...

之内

这里有什么问题？

#news { 
 position:absolute;
 min-width: 140px;
 min-height:100px;
 background: #fff; 
 color: #000;
 border:1px solid #000;
}


#news:before {
  content: "";

  vertical-align: middle;
  margin-left: 70px;
  width: 0; 
  height: 0; 

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

https://jsfiddle.net/3huzc74a/

Answer 1

你的定位代码有点偏。定位箭头伪元素的最佳方法（感谢@vals）是使用bottom: 100%以及margin: auto，left: 0和right: 0。这样，即使您决定更改箭头的大小，您的箭头也将始终保持在正确的位置。

这是一个有效的现场演示：

#bellnews {
  position: absolute;
  min-width: 140px;
  min-height: 100px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
}
#bellnews:before {
  content: "";
  vertical-align: middle;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

<div id=bellnews>
</div>

JSFiddle版本：https://jsfiddle.net/3huzc74a/3/

Answer 2

尝试使用父级的位置相对和子级的绝对值

#bellnews { 
 position:relative;
 width: 140px;
 height:100px;
 background: #fff; 
 color: #000;
 border:1px solid #000;
}


#bellnews:before {
  content: "";
  position: absolute;
  vertical-align: middle;
  margin-left: 70px;
  width: 0; 
  height: 0; 
  top: -5px;

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

https://jsfiddle.net/3huzc74a/2/

Answer 3

你需要在伪元素absolute之前做出：然后使用top来控制伪元素的位置。

This是了解基础知识的好教程。工作代码

#bellnews {
  position: absolute;
  min-width: 140px;
  min-height: 100px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  width: 100px
}
#bellnews:before {
  content: "";
  vertical-align: middle;
  margin-left: 70px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
  position: absolute;
  top: -5px;
}

<div id=bellnews>
</div>

Answer 4

如果你在#news div relative上设置位置，并且三角形是绝对的，那么它应该可以工作。

更新了您的小提琴：https://jsfiddle.net/3huzc74a/7/

#bellnews { 
 position: absolute;
 min-width: 140px;
 min-height:100px;
 background: #fff; 
 color: #000;
 border:1px solid #000;
}


#bellnews:before {
  content: "";
  position: absolute;
  top: -5px;
  vertical-align: middle;
  margin-left: 70px;
  width: 0; 
  height: 0; 

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

Answer 5

使用absolute定位left:calc(50% - 5px);将始终将其保持在中间，无论宽度如何。

Here's a fiddle

＆＃13;

#bellnews { 
 position:relative;
 min-width: 140px;
 min-height:100px;
 background: #fff; 
 color: #000;
 border:1px solid #000;
 display:inline-block;
}


#bellnews:before {
  content: "";
position:absolute;
bottom:100%;
  width: 0; 
  height: 0; 
  left:calc(50% - 5px);

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

＆＃13;

<div id=bellnews>
</div>

＆＃13;

css箭头顶部不起作用

5 个答案: