• css之 斜线


    方案一

    .x {
                border: solid 1px red;
                width: 100px;
                height: 100px;
                position: relative;
                background-color: transparent;
            }
    
                .x:before {
                    position: absolute;
                    top: 0px;
                    right: 0;
                    left: 0;
                    bottom: 0;
                    border-bottom: 100px solid red;
                    border-left: 100px solid transparent;
                    content: "";
                }
    
                .x:after {
                    position: absolute;
                    left: 1px;
                    right: 0;
                    top: 1px;
                    bottom: 0;
                    border-bottom: 99px solid white;
                    border-left: 99px solid transparent;
                    content: "";
                }
    
            .f {
                border: solid 1px red;
                width: 100px;
                height: 100px;
                position: relative;
                background-color: transparent;
            }
    
                .f:before {
                    position: absolute;
                    top: 0px;
                    right: 0;
                    left: 0;
                    bottom: 0;
                    border-bottom: 100px solid red;
                    border-right: 100px solid transparent;
                    content: "";
                }
    
                .f:after {
                    position: absolute;
                    left: 0;
                    right: 1px;
                    top: 1px;
                    bottom: 0;
                    border-bottom: 99px solid white;
                    border-right: 99px solid transparent;
                    content: "";
                }

    x 是 斜线, f 是反斜线。

    图:

    附:CSS 图形:

    css3激发想象/css3各种图形 http://www.cnblogs.com/wwcherish/archive/2012/09/18/2690336.html

    CSS3机器猫: http://keleyi.com/keleyi/phtml/html5/3.htm

    方案二

     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width="1"/></svg>');

  • 相关阅读:
    软件开发模式
    个人中心设计
    定制四则运算
    功能测试用例分析报告
    NABCD
    开发流程
    开发流程
    结对编程
    注册界面进行Toast提示
    登录注册页面修改错误
  • 原文地址:https://www.cnblogs.com/newsea/p/3781110.html
Copyright © 2020-2023  润新知