纯css实现三角的简单实例

2020-05-06 09:18:46易采站长站整理

在很多页面制作中会设计到突出一个三角,下面给出一种兼容各种浏览器的设计方法:

XML/HTML Code复制内容到剪贴板

<!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;