三角错位线框正文

美化源代码

复制源代码

源代码
<section style="margin:10px;"><section style="border-style: dashed;border-width: 2px;border-color: #f1b153;border-radius: 10px;box-sizing: border-box;"><section style="margin:8px 8px -8px -8px;"><section style="border-style: solid;border-width: 1px;border-color: #434343;border-radius: 10px;padding: 15px;background-color: #ffffff;box-shadow: #e8c800 0px 0px 5px;box-sizing: border-box;"><section style="margin-top:-25px;"><section style="display:inline-block;height: 0px;width: 0px;border-top:8px solid transparent;border-left: 15px solid #f1bf49;border-bottom: 8px solid transparent;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-ms-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);"></section><section style="display:inline-block;height: 0px;width: 0px;border-top:8px solid transparent;border-left: 15px solid #f1bf49;border-bottom: 8px solid transparent;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-ms-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);"></section><section style="display:inline-block;height: 0px;width: 0px;border-top:8px solid transparent;border-left: 15px solid #f1bf49;border-bottom: 8px solid transparent;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-ms-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);"></section><section style="display:inline-block;height: 0px;width: 0px;border-top:8px solid transparent;border-left: 15px solid #f1bf49;border-bottom: 8px solid transparent;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-ms-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);"></section></section><p style="letter-spacing: 2px;"><span style="font-size: 14px;">春风又绿神州地，百花齐放枝头笑。恰逢如此美好的新时代，有幸生活在这样幸福的国度，我们每个人谁也不能对不起祖国春天的土地。</span></p></section></section></section></section>

可视化

春风又绿神州地，百花齐放枝头笑。恰逢如此美好的新时代，有幸生活在这样幸福的国度，我们每个人谁也不能对不起祖国春天的土地。

专注移动端开发

快速链接

关于我们

115cms信息内容管理系统