一个只有CSS的带有*pointer*的框

a box with a *pointer* with just CSS?

本文关键字：pointer 的框 CSS 一个      更新时间：2023-09-26

我们如何仅使用CSS来实现如图所示的效果：https://i.stack.imgur.com/smWmQ.gif（我确信图像是用CSS创建的，因为我访问了那个在Chrome中禁用图像的网站）

这里有一个简单高效的方法

Fiddle

更新：

这里有一个例子：

html

<div>
    <span class='tip'></span>
</div>

css

div { 
    height: 30px;
    width:50px;
}
.tip {
    display:block;
    width:1px;
    heigth:20px;
    border-left: 30px solid #fff;
    border-right: 30px solid #fff;
    border-top: 25px solid #F00;
}

我从jQuery Ketchup插件中获得了类似的东西。CSS如下所示：

.box span {
    border-color: rgba(255, 0, 0, 0.6) transparent -moz-use-text-color;
    border-left: 0 solid transparent;
    border-right: 15px solid transparent;
    border-style: solid solid none;
    border-width: 10px 15px 0 0;
    display: block;
    height: 0;
    margin-left: 10px;
    width: 0;
}
.box ul {
    background: none repeat scroll 0 0 rgba(255, 0, 0, 0.6);
    border-radius: 5px 5px 5px 5px;
    color: #111111;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 12px;
    line-height: 16px;
    list-style: none outside none;
    margin: 0;
    padding: 10px;
    text-align: left;
}

根据HTML:

<div class="box">
    <ul>
        <li>Content</li>
    </ul>
    <span></span>
</div>

还可以看看JSFiddle。

你看到的三角形只是一个盒子，通常没有大小，具有真正退化和不同的border-widths。例如，要制作一个向上指向的三角形，你可以制作一个像这样的盒子：

      top
     _____
left| / ' |right
    |/___'|
     bottom

该框没有大小，top-border-width为0，其他宽度为非零值。左侧、右侧和顶部的边框颜色是透明的，因此您看不到这些三角形。你所能看到的只是底部边界。

工作示例：http://jsfiddle.net/NnGyv/

不幸的是，您不能将百分比与边框宽度一起使用，否则您可以实现可重用的CSS类定义。

大多数浏览器都可以通过HTML5验证自动做到这一点。您无法控制它的外观，但它的代码更容易编写1000倍，而且在没有Javascript的情况下也能工作。

如果你想要更多的视觉控制，有jQuery Tools Validator。尽管这使用了Javascript，但如果Javascript被禁用，它应该回到HTML5。

原始站点可能使用HTML5。

HTML5为客户端表单验证提供了一些非常简洁的功能。这看起来很像Chrome对具有"必需"属性集的输入框的处理。您还会注意到一个占位符（另一个HTML5属性）。

jsFiddle示例。你可以从Dive到HTML5中找到更多信息。

相关文章：