本文主要包含css,三角等相关知识,佚名 希望在学习及工作中可以帮助到您
在很多页面制作中会设计到突出一个三角，下面给出一种兼容各种浏览器的设计方法：
- <!DOCTYPE HTML>
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- .corner-top{
- width:0px;
- height:0px;
- font-size:0;
- border-width:20px;
- border-style:solid dashed dashed dashed;
- border-color:#e66161 transparent transparent transparent;
- }
- .corner-bottom{
- width:0px;
- height:0px;
- font-size:0;
- border-width:20px;
- border-style:dashed dashed solid dashed;
- border-color:transparent transparent #94e24f transparent;
- }
- .corner-left{
- width:0px;
- height:0px;
- font-size:0;
- border-width:20px;
- border-style:dashed dashed dashed solid;
- border-color:transparent transparent transparent #85bfda;
- }
- .corner-right{
- width:0px;
- height:0px;
- font-size:0;
- border-width:20px;
- border-style:dashed solid dashed dashed;
- border-color:transparent #f3bb5b transparent transparent;
- }
- </style>
- </head>
- <body>
- <div class="corner-top"></div>
- </br>
- <div class="corner-bottom"> </div>