纯HTML4+CSS绘出带边的三角形

最新推荐文章于 2022-11-28 17:35:02 发布

上海好程序员

最新推荐文章于 2022-11-28 17:35:02 发布

阅读量518

点赞数

分类专栏：成长的程序员文章标签： HTML CSS 带边三角形

本文链接：https://blog.csdn.net/fromfire2/article/details/80417423

版权

成长的程序员专栏收录该内容

80 篇文章 0 订阅

订阅专栏

效果：

源码：

<!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>

上海好程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
纯HTML4+CSS绘出带边的三角形

效果：源码：&lt;!DOCTYPE html&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head runat="server"&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g
复制链接

扫一扫