当前位置:Gxlcms > html代码 > 纯css代码如何制作透明三角形

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

时间:2021-07-01 10:21:17 帮助过:15人阅读

css实现下图样式,具体像素值记不住了,很好设置,html code (2014百度秋招面试题):

css制作透明三角形

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

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

  
  
  
  
demo  
  
  
  
  
   

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

人气教程排行