當(dāng)前位置:首頁(yè) > IT技術(shù) > Web編程 > 正文

css三角形三條邊全攻略
2021-09-16 11:34:39

之前寫(xiě)過(guò)一篇文章,叫做css三角形四條邊全攻略

css三角形四條邊全攻略

同時(shí)遇到了些問(wèn)題,有些朋友問(wèn)我能不能出一個(gè)三條邊的攻略,畢竟現(xiàn)在主流的都是用三條邊畫(huà)三角形。

仔細(xì)想想,也對(duì),所以今天我出一個(gè)三條邊的攻略

進(jìn)入主題

看如下代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [class*="triangle"] {
            width:0;
            height: 0;
        }
        .triangle{
            border-top: 50px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
    </style>
</head>

<body>
    <div class="triangle"></div>
    
</body>

</html>

以下是效果圖

css三角形三條邊全攻略_三角形

這里,我們定義了三條邊,分別為border-top,border-left,border-right。他們的值分別相等,border-left,border-right的顏色為透明,同時(shí)我們沒(méi)有定義border-bottom。

形成了一個(gè)等腰直角三角形,直角在最底部

個(gè)人覺(jué)得,看這樣的代碼,只會(huì)復(fù)制粘貼,沒(méi)有懂原理

所以現(xiàn)在,我來(lái)教大家怎么找規(guī)律

我們可以從上面的效果圖中發(fā)現(xiàn),底部是沒(méi)有線的,從代碼當(dāng)中,我們可以發(fā)現(xiàn),我們沒(méi)有定義border-bottom。左邊和右邊是白色,白色是body標(biāo)簽的背景色,相當(dāng)于兩邊是透明的,我們從代碼中也可以發(fā)現(xiàn),border-left和border-right的顏色是透明的。

所以現(xiàn)在我們看幾幅效果圖

css三角形三條邊全攻略_復(fù)制粘貼_02

這是一張直角為上面的等腰直角三角形

根據(jù)上張效果圖的經(jīng)驗(yàn)。我們來(lái)分析一下

頂部是沒(méi)有線的,所以頂部可能沒(méi)有定義,即border-top不存在,左右兩邊是白色,所以border-left和border-right是透明的,而底部是有線的,而且是最長(zhǎng)的,所以border-bottom有值并且顏色應(yīng)該是紅色

這里是效果圖的源代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [class*="triangle"] {
            width:0;
            height: 0;
        }
        .triangle{
            border-bottom: 50px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
    </style>
</head>

<body>
    <div class="triangle"></div>
    
</body>

</html>

我們猜對(duì)了O(∩_∩)O

接下來(lái),我們繼續(xù)看效果圖

css三角形三條邊全攻略_復(fù)制粘貼_03

從這張效果圖中,我們發(fā)現(xiàn)這不是一個(gè)等腰直角,是一個(gè)擁有60,30,90度的直角三角形,其中有線并最長(zhǎng)的是頂部,所以假設(shè)頂部為唯一有線的,左右兩個(gè)不對(duì)等,但都是透明的,所以border-left和border-right應(yīng)該是有值,但為透明,顯然底部即border-bottom不存在值。

css三角形三條邊全攻略_三角形_04

從效果圖中,我們發(fā)現(xiàn)左邊的三角形的面積沒(méi)有比右邊的大,所以我們可以假設(shè)border-right比border-left大

現(xiàn)在我們來(lái)驗(yàn)證我們的假設(shè)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [class*="triangle"] {
            width:0;
            height: 0;
        }
        .triangle{
            border-top: 40px solid red;
            border-left: 30px solid transparent;
            border-right: 50px solid transparent;
        }
    </style>
</head>

<body>
    <div class="triangle"></div>
    
</body>

</html>

我們答對(duì)了,O(∩_∩)O

現(xiàn)在筆者出幾道題,同學(xué)可以嘗試分析一下

1.

?css三角形三條邊全攻略_css_05

2.

css三角形三條邊全攻略_css_06

本文摘自 :https://blog.51cto.com/u

開(kāi)通會(huì)員,享受整站包年服務(wù)立即開(kāi)通 >