这是一份写HTML的样板,每写一个新的HTML页面都可以用它来初始化。<!--
HTML5. Use tags like <article>, <section>, etc.
See: http://www.sitepoint.com/web-foundations/doctypes/
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--
Ask IE to behave like a modern browser
See: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible
-->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Site</title>
...
最近看到那种带箭头的提示框,忽然想看一下到底什么原理,也就去网上搜了一下,现在总结一下实现方法。大概也就三种方法。第一种方法就是纯粹的利用div的边框图中A和B,C和D分别是一对实现向右和向左箭头的前后图。看图A:<div class="arrow-right-a"></div>CSS:.arrow-right-a {
width: 0;
height: 0;
border-left: 20px solid #ccc;
border-top: 10px solid #000;
border-bottom: 10px solid #000;
border-right: 10px solid #ccc;
}把div的高和宽都设为0,然后设置这个div的四个边框,边框宽度设置大一点。最终看效果(图A)。我们可以看到四个边框都是三角形的,那么我们是不是可以让其中的任意三个边框透明,只显示一个三角形,是不是就可以得到四个方向的箭头了呢?看图B:<div class="arrow-right-b"></div...