css倒三角的几种实现方式

最新推荐文章于 2024-06-18 16:57:24 发布

weixin_30621959

最新推荐文章于 2024-06-18 16:57:24 发布

阅读量529

点赞数

原文链接：http://www.cnblogs.com/leeLxj/p/6150288.html

版权

在网页中，你在很多地方都能看到倒三角，比如tooltips，下拉菜单等。大家有几种方式来实现呢？

1.BASE64编码图片

假如你已经有了三角形的图片，并且减少HTTP请求，那么将这个图片转换成一个BASE64字符串是最好的解决方案。

有用的工具

http://webcodertools.com/imagetobase64converter

http://image2base64.wemakesites.net/

优点

你可以按照自己的思想设计阴影，渐变等，然后对其进行转换编码

缺点

你需要使用一个图片编辑软件去设计
对于较大的图片，最终转换成字符串占用大小会很大
旧版本的浏览器，如：IE6/IE7是不兼容的

2.CSS 边框

<html>
<title>倒三角演示代码1</title>
<head>
 <style type="text/css">
        .triangleDiv{
            border-color: #57af1a #fff #fff #fff;
            border-style: solid;
            border-width: 100px 60px 0 60px;
            height: 0;
            width: 0;
        }
    </style>
</head>
<body>
<div class='triangleDiv'></div>
</body>
</html>

优点

很容易的通过修改一些CSS代码属性值而更改颜色和大小
这是一个跨浏览器的解决方案。

缺点

这个方式使用的是border,所以你不能添加阴影、渐变、和其他一些CSS3效果
请记住，IE6是不支持透明边界的-如果你关心这个问题
如果你使用火狐浏览器，要知道，CSS的“透明”有时可能不会是透明的

3.Unicode字符

<html>
<title>倒三角演示代码2</title>
<head>
 <style type="text/css">
        .triangleDiv{
            font-size: 18px;
            color: #f7931d;
            text-shadow: 0 1px 1px rgb(99, 95, 92);
        }
    </style>
</head>
<body>
<span class='triangleDiv'>▼</span>
</body>
</html>

优点

它是一个跨浏览器的技术
您可以使用CSS3的text-shadow属性添加阴影。

缺点

不能使用太多的CSS3效果，除了使用文字阴影。
在所有的浏览器，这是相当不可能实现像素完美。

4.CSS 旋转正方形

<html>
<title>倒三角演示代码3</title>
<head>
    <style type="text/css">
        .parentDiv {
            height: 14px;
            overflow: hidden;
        }

        .triangleDiv {
            position: relative;
            height: 20px;
            width: 12px;
            top: -12px;
            left: 7px;
            background: #0c0c0c;
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
<div class="parentDiv">
    <div class="triangleDiv"></div>
</div>
</body>
</html>

优点

CSS3阴影，渐变等可以更多的使用

缺点

这个解决方案不是跨浏览器的,首先是因为CSS3旋转。

转载于:https://www.cnblogs.com/leeLxj/p/6150288.html

weixin_30621959

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css倒三角的几种实现方式

在网页中，你在很多地方都能看到倒三角，比如tooltips，下拉菜单等。大家有几种方式来实现呢？1.BASE64编码图片假如你已经有了三角形的图片，并且减少HTTP请求，那么将这个图片转换成一个BASE64字符串是最好的解决方案。有用的工具http://webcodertools.com/imagetobase64converterhttp://image2base6...
复制链接

扫一扫