css实现三角形

duanshuyong

于 2012-05-09 00:05:32 发布

阅读量1k

点赞数

分类专栏：软件与技术文章标签： css class html filter border div

本文链接：https://blog.csdn.net/duanshuyong/article/details/7548232

版权

软件与技术专栏收录该内容

45 篇文章 0 订阅

订阅专栏

原理就是当元素边框(border)不为0时，四个角边框交界重叠处分45度角平分

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>提示信息</title>
        <style>
            .tipArrow {
                /*右边有颜色，其他透明*/
                border-color: transparent #e00 transparent transparent;
                border-style: solid;
                border-width: 6px 6px 6px 0px;
                padding: 0;
                width: 0;
                height: 0;
            }
            .triangle {
                border-color: transparent  transparent transparent red;
                border-style: solid;
                border-width: 20px 0px 20px 20px;
                font-size: 0;
                line-height: 0;	
                width: 0;
                height: 0;
				_border-top-color: white;
                _border-bottom-color: white;
                _filter: chroma( color =white);
            }
        </style>
    </head>
    <body>
    <div class="triangle"/>
    </div>
	<!--
    <div class="tipArrow"/>
    </div>
	-->
</body>
</html>