CSS3绘制平行四边形代码实例
分类:实例代码
CSS3绘制平行四边形代码实例属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它利用css3实现了平行四边形效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> .button { position: relative; display: inline-block; padding: .5em 1em; border: 0; margin: .5em; background: transparent; color: white; text-transform: uppercase; text-decoration: none; font: bold 200%/1 sans-serif; } .button::before { content: ''; /* To generate the box */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #58a; transform: skew(45deg); } </style> </head> <body> <button class="button"> <div>前端教程网</div> </button> </body> </html>
CSS3绘制平行四边形代码实例,这样的场景在实际项目中还是用的比较多的,关于CSS3绘制平行四边形代码实例就介绍到这了。