CSS代码绘制复杂的彩色标题字

1、案例分析：我们要绘制四个交错的三角形，并把一个文本内容放在标记的中间。

2、代码实现：我们要声明四次三角形的样式，再声明一次文本内容的样式。综合运用到边框、文本颜色、透明度等多个代码。

3、整个块元素的样式声明：

<section  style="

width:100%;

margin:1em auto;

text-align: center;" id="标题字" >

 <section style="

margin: 0 auto;

">

4、第一个橙色的三角形代码：

 <section class="xhr" style="width: 0px; height: 0px; border-left-width: 5px; border-left-style: solid; border-color: orange transparent; border-right-width: 10px; border-right-style: solid; border-bottom-width: 10px; border-bottom-style: solid; display: inline-block; opacity: 0.4;"></section>

5、第二个红色的三角形代码：

<section class="xhr" style="width: 0px; height: 0px; border-left-width: 10px; border-left-style: solid; border-color: rgb(255, 57, 31) transparent; border-right-width: 5px; border-right-style: solid; border-top-width: 10px; border-top-style: solid; display: inline-block; margin-left: -3px;"></section>

6、一个文本的代码实现效果，我们再把剩下的右边图形的代码呈现出来，从在实现整个图形的效果。

<section style="

margin-left: 0.3em;

display: inline-block;">

                <strong><span style="color: rgb(255, 0, 0); background-color: rgb(255, 255, 255);">百度经验</span></strong>

        </section>