html - 这个具体的设计效果是如何实现的？

Question

在这个网站上， http: //kickpoint.ca/，在顶部的主要红色部分下方有一个小红色三角形

我终其一生都无法弄清楚它是如何完成的。我使用过 Chrome 开发工具，但看不到它的定义位置。

任何人都知道它是如何实现的，或者是否有实现这种效果的标准方法？

Answer 1

CSS 三角形。

CSS

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
}

HTML

<div class="arrow-down"></div>

---

资源

更多信息可以在这里找到

Answer 2

这是 CSS 技巧中关于如何做到这一点的链接：http: //css-tricks.com/speech-bubble-arrows-that-inherit-parent-color/

谷歌是你的朋友；）

Answer 3

它使用 CSS 制作三角形。创建三角形的基本概念是div在一侧设置边界以形成基础。相邻边框留空，垂直于底边的边框设置为transparent。CSS三角形的一个很好的解释可以在这里找到：http ://css-tricks.com/snippets/css/css-triangle/

HTML

<div class="pointer">
    <div class="inner"></div>
    <div class="arrow"></div>
</div>

CSS

.pointer{
    width: 100px;
}
.pointer .inner {
    height: 25px;
    background: red;
}

.pointer .arrow{
    border-top: 10px solid red;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    width: 0px;
    margin: 0px auto;
}

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