zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    通过pwndbg看看c中局部变量是如何在stack上放置的 此外 printf %n的作用终于弄明白了
    pip 安装过慢 使用清华源 加速
    mac 10.15.6 安装 IDA
    使用机器学习检测命令行混淆
    安全技能树简版
    栈溢出 hack 入门例子 hello world
    201116西瓜书机器学习系列---8、集成学习
    legend2---某些js代码电脑浏览器支持,手机浏览器不支持的调试
    legend2---做题页的每个题目对应的答案重点标颜色
    legend2---jquery重新渲染某元素
  • 原文地址:https://www.cnblogs.com/shenbo666/p/9888387.html
Copyright © 2011-2022 走看看