精华内容
下载资源
问答
  • css斜线

    2018-11-27 13:28:00
    background: linear-gradient(45deg, transparent 49.5%, #f00 49.5%, #f00 50.5%, transparent 50.5%); 转载于:https://www.cnblogs.com/xulei1992/p/10025847.html
    background:
        linear-gradient(45deg, transparent 49.5%, #f00 49.5%, #f00 50.5%, transparent 50.5%);

     

    转载于:https://www.cnblogs.com/xulei1992/p/10025847.html

    展开全文
  • CSS斜线

    2014-03-14 16:47:00
     斜线       如果不支持,可见 这里    .demo{ border-corner-shape: bevel;  border-radius: 0px 100% 0px 100.6%;  border:1px solid red;  width:200px;  height:100px; }      斜线   ...
            <style>
            .demo{
      display: inline-block;
      width: 400px;
      height: 100px;
      resize: both;
      overflow: auto;
      margin-top: 30px;
      
    
          background: -webkit-gradient(linear, 100% 0, 0 100%, color-stop(49.9%, transparent), color-stop(49.9%, green), color-stop(50.1%, green), color-stop(50.1%, transparent));
        background: -webkit-linear-gradient(to top right, transparent 49.9%, green 49.9%, green 50.1%, transparent 50.1%);
        background: -moz-linear-gradient(to top right, transparent 49.9%, green 49.9%, green 50.1%, transparent 50.1%);
        background: -o-linear-gradient(to top right, transparent 49.9%, green 49.9%, green 50.1%, transparent 50.1%);
        background: linear-gradient(to top right, transparent 49.9%, green 49.9%, green 50.1%, transparent 50.1%);
      background-repeat: no-repeat;
    
      border:1px solid #999;
    }
    
            </style>
    <div class="demo">
              <div class="inner">
                 斜线
             </div>
        </div>
    

      如果不支持,可见这里

            <style>
            .demo{
    border-corner-shape: bevel;
       border-radius: 0px 100% 0px 100.6%;
       border:1px solid red;
       width:200px;
       height:100px;
    }
    
            </style>
    <div class="demo">
              <div class="inner">
                 斜线
             </div>
        </div>
    

      

    转载于:https://www.cnblogs.com/xupeiyu/p/3600889.html

    展开全文
  • DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果。代码分享给大家,你可以自己变通。http://www.admin10000.com提示要注意两点:1、DIV宽高的定义。2、DIV在 IE6 中默认是有高度的。 上图右边...

    DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果。代码分享给大家,你可以自己变通。

    http://www.admin10000.com 提示要注意两点:1、DIV宽高的定义。2、DIV在 IE6 中默认是有高度的。

    0818b9ca8b590ca3270a3433284dd417.png

    上图右边是我们要实现的效果,代码如下:

    #box{

    width:0px; height:0px;

    border:40px solid #000;

    border-top-color:#930;

    border-bottom-color:#0C3;

    border-left-color:#FC0;

    border-right-color:#009;

    }

    在FF IE7 IE8 都显示正常,但在IE6中,却如上图左边所示,中间有差距,因此,需要加一行:

    line-height:0px;

    最终代码如下:

    #box{

    width:0px; height:0px;

    border:40px solid #000;

    border-top-color:#930;

    border-bottom-color:#0C3;

    border-left-color:#FC0;

    border-right-color:#009;

    line-height:0px;

    }

    展开全文
  • CSS斜线表格

    2021-06-06 01:19:10
    Table斜线表格 直接上代码: Html代码: <table> <thead> <tr> <th colspan="2" class="lineTd"> <span class="leader">市领导</span> <span class="date">日期<...

    Table斜线表格

    直接上代码:
    Html代码:

     <table>
        <thead>
            <tr>
               <th colspan="2" class="lineTd">
                   <span class="leader">市领导</span>
                   <span class="date">日期</span>
               </th>
            </tr>
        </thead>
    </table>
    

    Css代码:

    thead{
            .lineTd {
              width: 33%;
              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>');
              .leader{
                float:right;
                margin-top:-3%;
              }
              .date{
                float:left;
                margin-top:10px
              }
            }
          }
    

    没什么注意的地方,日常记录吧!最后附上效果图:
    在这里插入图片描述

    展开全文
  • 谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线 原文:谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线开本系列,谈谈一些有趣的CSS题目,题目类型天马行空,想到什么说什么,不仅为了拓宽...
  • DIV+CSS 斜线效果

    2012-07-07 07:57:00
    DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果。代码分享给大家,你可以自己变通。 http://www.admin10000.com提示要注意两点:1、DIV宽高的定义。2、DIV在 IE6 中默认是有高度的。 上...
  • 巧妙的实现 CSS 斜线使用单个标签,如何实现下图所示的斜线效果。也就是如何使用 CSS斜线?这种类似于表格的斜线效果,细细研究一下,还是有一些挺有趣的方法可以实现之。我们假定我们的 HTML 结构如下:...
  • 巧妙的实现 CSS 斜线

    千次阅读 2018-09-29 09:48:00
    也就是如何使用 CSS斜线? 这种类似于表格的斜线效果,细细研究一下,还是有一些挺有趣的方法可以实现之。 我们假定我们的HTML结构如下: ? 1 <div></div> 假定高宽各为 100px,...
  • 九、巧妙的实现 CSS 斜线使用单个标签,如何实现下图所示的斜线效果。也就是如何使用 CSS斜线?这种类似于表格的斜线效果,细细研究一下,还是有一些挺有趣的方法可以实现之。我们假定我们的HTML结构如下:?1假定...
  • div和css制作斜线示例分享DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果。代码分享给大家,你可以自己变通。提示要注意两点:1、DIV宽高的定义。2、DIV在 IE6 中默认是有高度的。上图右边是...
  • 原标题:有趣的CSS题目(9):巧妙实现 CSS 斜线(点击上方公众号,可快速关注)作者:伯乐在线专栏作者 - chokcoco如需转载,发送「转载」二字查看说明开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目...
  • 巧妙的实现 CSS 斜线(炫酷的小效果)

    千次阅读 2016-12-04 22:46:00
    开本系列,谈谈一些有趣的CSS题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到...
  • 开本系列,谈谈一些有趣的CSS题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。...使用单个标签,如何实现下图所示的斜线效果。也就是如何使用 CSS ...
  • DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果,大家参考使用吧
  • DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果。代码分享给大家,你可以自己变通。提示要注意两点:1、DIV宽高的定义。2、DIV在 IE6 中默认是有高度的。上图右边是我们要实现的效果,代码...
  • CSS表格斜线.rar

    2019-07-05 00:30:06
    CSS表格斜线
  • css 模拟表格斜线

    2020-09-27 17:29:13
    利用div+css模拟表格的对角线,效果还可以,原理就是利用容器border宽度大于1时,相邻表格之间相接处是斜线的原理。
  • CSS 裁剪 斜线

    2021-07-02 10:50:46
    <template> <div class="container"> <div class="top"> <div class="content"> </div> <div class="num">1</div> <...style lang="less" scoped&
  • DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果。代码分享给大家,你可以自己变通。  提示要注意两点:1、DIV宽高的定义。2、DIV在 IE6 中默认是有高度的。  上图右边是我们要实现的...
  • css斜线

    2019-09-29 23:18:17
    css代码: .border{width:500px; height:200px; border-bottom:2px solid #000000; -webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);} html代码: <div class="border"></div> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,621
精华内容 2,648
关键字:

css斜线