Question

我有一个div元素，它会显示一条消息，指示我页面上的一个点。

箭头应显示在div的左侧而不是底部（当前）。

这是我的HTML，CSS和小提琴代码。

body {
  font-family: Helvetica;
  font-size: 13px;
}
div.callout {
  height: 20px;
  width: 130px;
  /*float: left;*/
  z-index: 1;
}
div.callout {
  background-color: #444;
  background-image: -moz-linear-gradient(top, #444, #444);
  position: relative;
  color: #ccc;
  padding: 20px;
  border-radius: 3px;
  box-shadow: 0px 0px 20px #999;
  //margin: 25px;
  min-height: 20px;
  border: 1px solid #333;
  text-shadow: 0 0 1px #000;
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;
}
.callout.left::before {
  left: 0%;
  right: -20px;
  top: 40%;
  border-left: 10px solid #444;
}
.callout.top::before {
  left: 0%;
  bottom: -20px;
  border-top: 11px solid #444;
}
.callout.bottom::before {
  left: 45%;
  top: -20px;
  border-bottom: 10px solid #444;
}
.callout.right::before {
  top: 40%;
  border-right: 10px solid #444;
}
.callout.top-left::before {
  /*left: 7px;*/
  bottom: -20px;
  border-top: 10px solid #444;
}
.callout.top-right::before {
  /*right: 7px;*/
  bottom: -20px;
  border-top: 10px solid #444;
}

<div class="callout top">test</div>

小提琴： - https://jsfiddle.net/5t6s6p5y/

Answer 1

将CSS更改为以下代码：

.callout.top::before {
    border-right: 11px solid #444;
    bottom: 10px;
    left: -20px;
}

示例：

body {
  font-family: Helvetica;
  font-size: 13px;
}
div.callout {
  height: 20px;
  width: 130px;
  /*float: left;*/
  z-index: 1;
}
div.callout {
  background-color: #444;
  background-image: -moz-linear-gradient(top, #444, #444);
  position: relative;
  color: #ccc;
  padding: 20px;
  border-radius: 3px;
  box-shadow: 0px 0px 20px #999;
  //margin: 25px;
  min-height: 20px;
  border: 1px solid #333;
  text-shadow: 0 0 1px #000;
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;
}
.callout.left::before {
  left: 0%;
  right: -20px;
  top: 40%;
  border-left: 10px solid #444;
}
.callout.top::before {
  border-right: 11px solid #444;
  bottom: 10px;
  left: -20px;
}
.callout.bottom::before {
  left: 45%;
  top: -20px;
  border-bottom: 10px solid #444;
}
.callout.right::before {
  top: 40%;
  border-right: 10px solid #444;
}
.callout.top-left::before {
  /*left: 7px;*/
  bottom: -20px;
  border-top: 10px solid #444;
}
.callout.top-right::before {
  /*right: 7px;*/
  bottom: -20px;
  border-top: 10px solid #444;
}

<div class="callout top">test</div>

同样在jFiddle。

Answer 2

您应该使用课程right而不是top，以免破坏可重用性。

此外，您的.callout.right类缺少左侧定位。

即

.callout.right::before {
 left: -20px;
 top: 40%;
 border-right: 10px solid #444;
}

请参阅：https://jsfiddle.net/5t6s6p5y/2/

在div的左侧显示指针

2 个答案: