CSS 顶部三角形矩形
分类:实例代码
CSS 顶部三角形矩形属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它实现了顶部带有三角形的矩形效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.pipipi.net/" /> <title>前端教程网</title> <style> .fa { position: relative; width: 150px; height: 80px; border: 1px solid #333; margin: 40px; border-radius: 5px; text-align: center; line-height: 80px; background-color: #FFF5EE; } .fa2 { position: absolute; width: 0; height: 0; left: 30px; top: -32px; border-width: 16px; border-style: solid; border-color: transparent transparent #333 transparent; } .fa2>div { position: absolute; width: 0; height: 0; left: -15px; top: -14px; border-width: 15px; border-style: solid; border-color: transparent transparent #FFF5EE transparent; } </style> </head> <body> <div class="fa "> <div class="fa2"> <div></div> </div> 前端教程网 </div> </body> </html>
非常简单的带有三角形的矩形效果,利用边框的一些特点实现此效果。
CSS 顶部三角形矩形,这样的场景在实际项目中还是用的比较多的,关于CSS 顶部三角形矩形就介绍到这了。