1、案例分析：我们要做三个三角形标志，一个是大的带字的，两个是小的，不同颜色的三角形。
2、代码实现：要实现这样的一系列标志，我们要声明三次不同的三角形样式，还有下文本元素的呈现。
3、大的三角形代码如下：
<section style="
width:100%;
margin:1em auto;
text-align: center;" id="三角形标记" >
<section class="xhr" style="width: 0px; height: 0px; border-left-width: 25px; border-left-style: solid; border-left-color: transparent; border-right-width: 25px; border-right-style: solid; border-right-color: transparent; border-bottom-width: 40px; border-bottom-style: solid; border-bottom-color: rgb(255, 100, 31); margin: 0px auto;"></section>
<section>
4、文字的代码如下：
<section>
<p class="wihudong" style="margin-top: -1.5em; color: rgb(255, 255, 255); font-size: 12px;">
百度
</section>
5、一个橙色的小角形代码如下：
</section>
<section class="xhr" style="width: 0px; height: 0px; border-left-width: 15px; border-left-style: solid; border-left-color: transparent; border-right-width: 15px; border-right-style: solid; border-right-color: transparent; border-bottom-width: 20px; border-bottom-style: solid; border-bottom-color: rgb(255, 100, 31); margin: 0px auto;"></section>
6、剩余的代码也一一给出来，从而让整个图形呈现出来。
<section class="xhr" style="width: 0px; height: 0px; border-left-width: 15px; border-left-style: solid; border-left-color: transparent; border-right-width: 15px; border-right-style: solid; border-right-color: transparent; border-bottom-width: 20px; border-bottom-style: solid; border-bottom-color: blue; margin: 0px auto;"></section>
<section class="xhr" style="width: 0px; height: 0px; border-left-width: 15px; border-left-style: solid; border-left-color: transparent; border-right-width: 15px; border-right-style: solid; border-right-color: transparent; border-bottom-width: 20px; border-bottom-style: solid; border-bottom-color: orange; margin: 0px auto;"></section>
