序号三角几何简约标题底色

美化源代码

复制源代码

源代码
<sectionstyle="text-align: center;margin-top: 10px;margin-bottom: 10px;"><section style="display: flex;justify-content: center;align-items: center;"><section style="z-index:1000;"><section style="color:#fff;font-size:18px;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-ms-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);"><p>                    1</p></section><section style="margin-top:-28px;"><section style="height:0px;width: 0px;display: inline-block;border-top: 2.2em solid #8bb6c6;border-left: 1.2em solid transparent !important;border-right: 1.2em solid transparent !important;box-sizing: border-box;"><br/></section></section></section><section style="margin-top:-26px;margin-left:-30px;"><section style="height: 2.2em;background-color: rgb(232, 242, 245);color: rgb(81, 145, 164);padding-right: 20px;padding-left: 35px;line-height: 2.2em;transform: skew(-25deg);"><p style="letter-spacing:2px;transform: skew(25deg);-webkit-transform: skew(25deg);-moz-transform: skew(25deg);-ms-transform: skew(25deg);-o-transform: skew(25deg);">                    序号标题</p></section></section></section></section>

可视化

序号标题

专注移动端开发

快速链接

关于我们

115cms信息内容管理系统