css倒三角的幾種實現方式

時間 2019-12-11

標籤 css 三角幾種實現方式欄目 CSS 简体版

原文原文鏈接

在網頁中，你在不少地方都能看到倒三角，好比tooltips，下拉菜單等。你們有幾種方式來實現呢？css

1.BASE64編碼圖片html

假如你已經有了三角形的圖片，而且減小HTTP請求，那麼將這個圖片轉換成一個BASE64字符串是最好的解決方案。web

有用的工具瀏覽器

http://webcodertools.com/imagetobase64converter工具

http://image2base64.wemakesites.net/編碼

優勢

你能夠按照本身的思想設計陰影，漸變等，而後對其進行轉換編碼

缺點

你須要使用一個圖片編輯軟件去設計
對於較大的圖片，最終轉換成字符串佔用大小會很大
舊版本的瀏覽器，如：IE6/IE7是不兼容的

2.CSS 邊框spa

<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字符.net

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