css画三角形

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*向上*/
        .triangle_border_up {
             0;
            height: 0;
            border- 0 30px 30px;
            border-style: solid;
            border-color: transparent transparent #333; /*透明 透明  灰*/
            margin: 40px auto;
            position: relative;
        }

        .triangle_border_up span {
            display: block;
             0;
            height: 0;
            border- 0 28px 28px;
            border-style: solid;
            border-color: transparent transparent #fc0; /*透明 透明  黄*/
            position: absolute;
            top: 0px;
            left: 0px;
        }

        /*向下*/
        .triangle_border_down {
             0;
            height: 0;
            border- 30px 30px 0;
            border-style: solid;
            border-color: #333 transparent transparent; /*灰 透明 透明 */
            margin: 40px auto;
            position: relative;
        }

        .triangle_border_down span {
            display: block;
             0;
            height: 0;
            border- 28px 28px 0;
            border-style: solid;
            border-color: #fc0 transparent transparent; /*黄 透明 透明 */
            position: absolute;
            top: 0px;
            left: 0px;
        }

        /*向左*/
        .triangle_border_left {
             0;
            height: 0;
            border- 30px 30px 30px 0;
            border-style: solid;
            border-color: transparent #333 transparent transparent; /*透明 灰 透明 透明 */
            margin: 40px auto;
            position: relative;
        }

        .triangle_border_left span {
            display: block;
             0;
            height: 0;
            border- 28px 28px 28px 0;
            border-style: solid;
            border-color: transparent #fc0 transparent transparent; /*透明 黄 透明 透明 */
            position: absolute;
            top: 0px;
            left: 0px;
        }

        /*向右*/
        .triangle_border_right {
             0;
            height: 0;
            border- 30px 0 30px 30px;
            border-style: solid;
            border-color: transparent transparent transparent #333; /*透明 透明 透明 灰*/
            margin: 40px auto;
            position: relative;
        }

        .triangle_border_right span {
            display: block;
             0;
            height: 0;
            border- 28px 0 28px 28px;
            border-style: solid;
            border-color: transparent transparent transparent #fc0; /*透明 透明 透明 黄*/
            position: absolute;
            top: 0px;
            left: 0px;
        }

    </style>
</head>
<body>
<!-- 向上的三角形 -->
<div class="triangle_border_up">
    <span></span>
</div>

<!-- 向下的三角形 -->
<div class="triangle_border_down">
    <span></span>
</div>

<!-- 向左的三角形 -->
<div class="triangle_border_left">
    <span></span>
</div>

<!-- 向右的三角形 -->
<div class="triangle_border_right">
    <span></span>
</div>
</body>
</html>

相关阅读:
Python 列表元素排重uniq
Python正则表达式汇总
 Python 正则表达式：只要整数和小数
 c++写入txt文件
 OpenMP求完数
 Python分割list
用ConfigParser模块读写配置文件——Python
Python 正则表达式
 教程和工具--用wxPython编写GUI程序的
 matlab 之字体调整
原文地址：https://www.cnblogs.com/shenbo666/p/9888387.html