这种特定的设计效果如何实现？

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>

---

<强>资源

可以找到更多信息here

Answer 2

以下是CSS技巧的链接：http://css-tricks.com/speech-bubble-arrows-that-inherit-parent-color/

Google是你的朋友;）

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/