实现的原来就是：在一个宽高为0像素的块状元素中设置border属性，例如

 
 

  
  cssdiv/css.html target=_blank >css">
  
  
.box{  
  
  
width:0px;  
  
  
height:0;  
  
  
border-bottom:50px #F00 solid;  
  
  
border-left:50px #03F solid;  
  
  
border-right: 50px #F90 solid;  
  
  
border-top:50px #6C0 solid;  
  
  
}  
 
 

在浏览器中的显示如图：

 
 

  
  
.to-top{  
  
  
display:block;  
  
  
overflow:hidden;  
  
  
width:0px;  
  
  
height:0px;  
  
  
border:6px solid #ccc;  
  
  
border-color:#ccc #fff;  
  
  
border-width:0 6px 6px 6px;  
  
  
} 
 
 

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 新手入门HTML有哪些JavaScript数据类型基础知识要掌握

  这篇文章主要介绍了萌新如何入门html5，帮助大家更好的理解和制作网页，感兴趣的朋友可以了解下

• 用Canvas如何制作仿手机的手势解锁功能

  这篇文章主要介绍了canvas实现手机的手势解锁的步骤详细，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• css实现元素居中有哪些方法，你知道几个？

  在开发中，很多需求需要我们对元素居中，例如文本居中，多行文本居中，块级元素水平居中、垂直居中等，那么这些要如何实现呢？下面是一些css实现元素居中的方法，有需要的朋友可以参考一下。

• CSS中将图片处理成像素风格的思路和方法是什么

  如何把图片变成“伪像素风”？本篇文章给大家介绍一下使用CSS处理图片，将其转为“像素风”的方法，希望对大家有所帮助！

• CSS3渐变类型有几种，怎样实现

  css3定义渐变语法的是什么CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你