纯HTML4+CSS绘出带边的三角形_排序按钮 html 三角-优快云博客

本文介绍了一种使用纯CSS绘制三角形的方法，并提供了不同方向（上、下、左、右）三角形的具体实现代码。通过调整边框颜色和样式，可以轻松创建各种尺寸和颜色的三角形。

效果：

源码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .triangle {
            width: 0;
            height: 0;
            display: inline-block;
            border: 10px solid #000000;
        }

            .triangle div {
                width: 0;
                height: 0;
                position: relative;
                border: 8px solid red;
            }

        .triangle-up, .triangle-up div {
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-style: none;
        }

            .triangle-up div {
                left: -8px;
                top: 1px;
            }

        .triangle-down, .triangle-down div {
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-style: none;
        }

            .triangle-down div {
                left: -8px;
                top: -9px;
            }

        .triangle-left, .triangle-left div {
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-style: none;
        }

            .triangle-left div {
                left: 1px;
                top: -8px;
            }

        .triangle-right, .triangle-right div {
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-right-style: none;
        }

            .triangle-right div {
                left: -9px;
                top: -8px;
            }
    </style>
</head>
<body>
    <table width="100%" height="800">
        <tr>
            <td align="center" valign="middle">
                <span>Hello World</span>
                <div class="triangle triangle-up">
                    <div></div>
                </div>
                <div class="triangle triangle-down">
                    <div></div>
                </div>
                <div class="triangle triangle-left">
                    <div></div>
                </div>
                <div class="triangle triangle-right">
                    <div></div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>