• DIV制作小三角


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        .body{
            height: 100px;
             100px;
            background-color:blue;
            /*相对位置*/
            position: relative;
            /*无用代码*/
            margin: 100px 100px;
        }
        /**/
        .triangle1{
             0;
            height: 0;
            border: 10px solid red;
            border-top: none;
            border-right-color: transparent;
            border-left-color: transparent;
            /*绝对位置*/
            position: absolute;
            /*将小三角形向下移90个像素*/
            top: 90px;
            /*将小三角形向右移10个像素*/
            left: 10px;
        }
        .triangle2{
             0;
            height: 0;
            border: 10px solid red;
            border-left-color: transparent;
            border-bottom-color: transparent;
            border-top-color: transparent;
            position: absolute;
            top: 30px;
            left: -20px;
        }
        .triangle3{
             0;
            height: 0;
            border: 30px solid red;
            border-top: none;
            border-left-color: transparent;
            border-bottom-color: transparent;
            border-top-color: transparent;
            position: absolute;
            top: 0px;
            left: 40px;
        }
        .triangle4{
             0;
            height: 0;
            border: 10px solid red;
        }
        .triangle5{
             0;
            height: 0;
            border: 10px solid red;
            border-left-color: transparent;
            border-top-color: transparent;
            position: absolute;
            bottom: 0px;
            right: 0px;
        }
        .triangle6{
             0;
            height: 0;
            border: 10px solid red;
            border-left-color: transparent;
            border-right-color: transparent;
            border-top: none;
            position: absolute;
            left: 36px;
            bottom: 100px;
        }
        .triangle7{
             0;
            height: 0;
            border: 10px solid red;
            border-bottom-color: transparent;
            border-top-color: transparent;
            border-right-color: transparent;
            position: absolute;
            top: 30px;
            left: 100px;
        }
    </style>
    <body>
    <div class="body">
        <div class="triangle1">
    
        </div>
        <div class="triangle2">
    
        </div>
        <div class="triangle3">
    
        </div>
        <div class="triangle4">
    
        </div>
        <div class="triangle5">
    
        </div>
        <div class="triangle6">
    
        </div>
        <div class="triangle7">
    
        </div>
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    游戏的真实度
    91)Prometheus简单入门
    90)ubuntu 内核升级/降级系统内核(4.13.0)
    89)yaml文件语法
    使用格式工厂,把视频转为gif,画质受损,出现彩虹条模糊的情况
    fastadmin管理后台--带个人日程管理功能
    http响应--禁用缓存设置
    HTTP响应-302,304码的运用
    http请求详解 防盗链技术
    php支付宝支付接口开发(教程笔记)
  • 原文地址:https://www.cnblogs.com/i-tao/p/12659057.html
Copyright © 2020-2023  润新知