实体小三角-制作方法

来源：互联网发布：台风战机参数知乎编辑：程序博客网时间：2024/04/30 13:46

实体小三角-制作方法

方法和上篇箭头小三角差不多，只有一点点区别

方法一、

将上篇方法一的空菱形三角改为实体三角，即可.

方法二、

相对于箭头小三角制作方法（二），只需要一个b标签即可。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>易迅网三角</title>    <link rel="shortcut icon"  href="favicon.ico">    <style>        div.test{            width: 0;            height: 0;            border-top:20px solid red;            border-bottom: 20px solid yellow;            border-left: 20px solid blue;            border-right: 20px solid pink;        }        div.content{            position: relative;        }        b{            position: absolute;            top: 5px;            display: inline-block;            width: 0;            height: 0;            border-width: 5px;            border-color: red transparent transparent transparent;            border-style: solid dashed dashed dashed;        }    </style></head><body>    <div>测试：</div>    <div class="test"></div>    <hr>    <br>    <div class="content">这是一段文本<b></b></div></body></html>

这里写图片描述

0 0