纯css实现三角的简单实例

2024-07-11 08:36:50

字体：大中小

来源：转载

供稿：网友

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

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;