操作CSS3新特性建设透明边框三角

先来看一下结果,这在CSS3之前,完全是不行想象的,只有图片才气做的到,但在HTML5和CSS3大行其道的本日,实现这种结果,那都不是事啊。

看一下实现的代码:

<!DOCTYPE html> <html> <head> <style type='text/css'> /* 上三角 */ .arrow-up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid green; } /* 下三角 */ .arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid orange; } /* 右三角 */ .arrow-right { width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid blue; } /* 左三角 */ .arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid silver; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>

您大概感乐趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsdpss.html