欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

纯css代码如何制作透明三角形

程序员文章站 2022-04-15 11:39:44
...
css实现下图样式,具体像素值记不住了,很好设置,html code (2014百度秋招面试题):

纯css代码如何制作透明三角形

分析:这个样式的关键就在三角形和三角形实现了之后的变成只有个边框的三角形。利用元素的:after和:before伪元素(请自动忽略低版本IE)。

思想:先实现个正方形,在实现个三角形层,放在右上角,然后再实现一个透明的三角形覆盖黑色三角形的内部,只留边框。

  
  


demo
  
    

以上就是本文的全部内容,希望对码农的学习有所帮助

相关标签: css 三角形