斜线

.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;
}
.demo2{
border-corner-shape: bevel;
border-radius: 0px 100% 0px 100.6%;
width:200px;
height:100px;
border:1px solid red;
}

     <div class="demo">

          <div class="inner">

             斜线

         </div>

    </div>


.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;

}




如果不支持，可见这里


     <div class="demo">

        <div class="innert">斜线</div>

    </div>


.demo2{

   border-corner-shape: bevel;

   border-radius: 0px 100% 0px 100.6%;

   border:1px solid red;

   width:200px;

   height:100px;

}


												


											
css斜线的更多相关文章
	

    
						
  1. 谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线
		
    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
    
		
    2. 
						
  2. 巧妙的实现 CSS 斜线(炫酷的小效果)
		
      开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果 ...
    
		
    3. 
								
  3. DIV+CSS制作斜线效果记录
		
    DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果.代码分享给大家,你可以自己变通. 提示要注意两点:1.DIV宽高的定义.2.DIV在 IE6 中默认是有高度的. ...
    
		
    4. 
						
  4. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
		
    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
    
		
    5. 
						
  5. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
		
    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
    
		
    6. 
						
  6. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
		
    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
    
		
    7. 
						
  7. 谈谈一些有趣的CSS题目（十三）-- 巧妙地制作背景色渐变动画！
		
    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
    
		
    8. 
						
  8. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
		
    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
    
		
    9. 
						
  9. 谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset
		
    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 使用Myeclipse完成Hibernate的逆向工程
			
    前面已经提到过Hibernate的开发流程一般有两种: 1.由Domain object > mapping > db 2.由db开始,用工具生成生成mapping 和Domain obj ...
    
			
    2. 
						
  2. hdu4003Find Metal Mineral(树形DP）
			
    4003 思维啊 dp[i][j]表示当前I节点停留了j个机器人 那么它与父亲的关系就有了 那条边就走了j遍 dp[i][j] = min(dp[i][j],dp[child][g]+dp[i][j- ...
    
			
    3. 
						
  3. 使用multimap创建重复键关联容器
			
    在“使用 <map> 库创建关联容器”一文中,我们讨论了标准库中的 map 关联容器.但那只是 map 容器的一部分.标准库还定义了一个 multimap 容器,它与 map 类似,所不同 ...
    
			
    4. 
						
  4. datagridview的某些属性以及增删改查
			
    private void button1_Click(object sender, EventArgs e) //查询 { dataGridView1.AutoGenerateColumns = fa ...
    
			
    5. 
						
  5. [转载]流式大数据处理的三种框架：Storm，Spark和Samza
			
    许多分布式计算系统都可以实时或接近实时地处理大数据流.本文将对三种Apache框架分别进行简单介绍,然后尝试快速.高度概述其异同. Apache Storm 在Storm中,先要设计一个用于实时计算的 ...
    
			
    6. 
						
  6. Javascript零散知识点总结
			
    一.Javascript获取系统当前时间 <script type="text/javascript"> var time = new Date(); var date ...
    
			
    7. 
						
  7. Linux kernel scriptes bin2c "\x"
			
    /**************************************************************************** * Linux kernel scripte ...
    
			
    8. 
						
  8. 每天一个Linux命令(1): find
			
    1 find 命令是用来查找制定目录下符合条件的文件执行相应的动作(print exec等) find [path...] [expression] path:find命令所查找的目录路径.例如用.来 ...
    
			
    9. 
						
  9. Android WebView中那些不得不解决的坑~~
			
    前面那张hybrid开发心得 有人问 怎么解决不用onJsPrompt 来回调js函数的问题.其实很简单,就是在在你的jscalljava回调函数内 另外开个线程去load js代码即可: wb.po ...
    
			
    10. 
						
  10. Swift语法
			
    Swift语法 标签(空格分隔): Swift 1.打印输出语句 println("Hello, Swift!") 注意每行代码后面无需添加分号作为结束 2.简单值 let---常 ...
    
			
    11.