2

您可能已经在 Facebook、Google、Twitter 等网站上看到过这种带有三角形箭头提示的框。幸运的是，我也用纯 CSS 创建了一个。

这是代码：

HTML：

<div class="box"><h3>This box contains a triangular arrow tip on top of it.</h3></div>

CSS：

.box { position: relative; background: #fff; color: #000; padding: 8px; border: 1px solid #ccc; }

.box:after {content: ""; position: absolute; display: block; width: 0; top: -15px; right: auto; bottom: auto; left: 5px; border-width: 0 10px 15px; border-style: solid; border-color: #fff transparent; }

你可以看到三角形的尖端是纯白色的。如果您研究 CSS，您会发现提示的白色实际上是边框的颜色。

现在我正在寻找的是三角形尖端表面上的（例如灰色）边框或轮廓。因为提示的颜色来自边框，所以我不能使用第二个边框，因为没有这样的东西。我试过大纲，但它似乎不起作用。任何帮助如何用纯 CSS 做到这一点？

4

4 回答 4

5

利用:before伪元素在第一个后面放置一个类似的箭头。

这是http://cssarrowplease.com上使用的技术。

根据您的示例查看它的实际操作。

.box:before {
    content:"";
    position: absolute;
    display: block;
    width: 0;
    top: -16px;
    right: auto;
    bottom: auto;
    left: 3px;
    border-width: 0 12px 17px;
    border-style: solid;
    border-color: #ccc transparent;
    z-index: -1;
}
于 2013-03-05T16:15:52.670 回答
3

不要使用边框来创建三角形。只需使用您应用 CSS 转换的伪元素。

演示

结果：

结果

HTML：

<ul class='drop-down'>
  <li><a href='#'>Suggestions</a></li>
  <li><a href='#'>Friends (8)</a></li>
  <li><a href='#'>Friend Requests</a></li>
  <li><a href='#'>My Requests</a></li>
  <li><a href='#'>People I blocked</a></li>
</ul>

相关CSS：

.drop-down {
  position: relative;
  border: solid 1px #ccc;
  background: white;
}
.drop-down:before {
  position: absolute;
  top: -.56em; left: 1em;
  border-left: solid 1px #ccc;
  border-top: solid 1px #ccc;
  width: 1em; height: 1em;
  transform: rotate(45deg);
  background: inherit;
  content: '';
}

/* variations */
.drop-down:first-child:before {
  transform: rotate(60deg) skewX(30deg) scaleY(.866);
}
.drop-down:nth-child(3):before {
  border-right: solid 1px #ccc;
  border-left: none;
  transform: rotate(-60deg) skewY(30deg) scaleX(.866);
}
于 2013-03-05T16:36:48.357 回答
1

您可以使用 UTF-8“向上箭头”和一些绝对定位和文本阴影来做到这一点：

你的容器：

.boxArrow {
    margin-top:30px;
    height:100px;
    width:100px;    
    border:1px solid #000000;
    position:relative;
}

箭头：

.boxArrow:before {
    content: "\25B2";
    font-size:16px;
    color:#ffffff;
    position:absolute;
    top:-15px;
    left:30px;
    text-shadow: -1px 0 black, 0 1px white, 1px 0 black, 0 -1px black;
}
于 2013-03-05T16:15:50.630 回答
0

为了简单、轻松和快速的工作，您可以使用 jQuery UI：http: //jqueryui.com/tooltip/#custom-style

于 2013-10-31T04:24:33.520 回答