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

在这个网站上，有一个小红色三角形下方的主要红色部分在顶部

我一辈子都搞不清楚这是怎么回事。我使用过Chrome开发工具，但看不到它的定义

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

CSS三角形

CSS

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

.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;
}

HTML

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

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

---

资源

---

可以找到更多信息

这里有一个来自CSS技巧的链接，介绍如何做到这一点：

---

谷歌是你的朋友；）

它使用CSS制作三角形。创建三角形的基本概念是将

div

的边界设置在一侧以形成基础。相邻边框留空，垂直于底部的边框设置为透明。CSS三角形的一个很好的解释可以在这里找到：

HTML

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

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

---

工作示例：

这是所有带边框的CSS3以及：before和：after伪符号。请查看psuedo元素“after”和css rotate的用法：：-）也可以看到这个：是的，更具体地说，它附加到一个伪元素，这个伪元素在Chrome的开发工具中显示在匹配的CSS规则窗格的底部。