當(dāng)前位置：圖趣網(wǎng)（Tuquu） > 網(wǎng)頁(yè)設(shè)計(jì)教程 > 移動(dòng)前端 > 關(guān)于CSS引入體例的細(xì)致見(jiàn)解小結(jié)

用CSS畫(huà)一個(gè)帶陰影的三角形的示例代碼

2019/4/14 21:26:12來(lái)源：不詳

1. 思路

怎么用CSS畫(huà)一個(gè)帶陰影的三角形呢 ? 有童鞋說(shuō), 這還不簡(jiǎn)單嗎 網(wǎng)上有許多解決方案, 但其實(shí)大多都是實(shí)現(xiàn)不太完善的, 存在一些題目

假設(shè)我們做一個(gè)向下的三角形箭頭 常見(jiàn)的方法大致有兩種

  1. 通過(guò)邊框控制, border-left和border-right設(shè)為透明, border-top設(shè)為預(yù)定的顏色即可
  2. 通過(guò) transform 旋轉(zhuǎn)盒子

方法一可以畫(huà)三角形, 但是畫(huà)陰影是很難做到的(假如做到的同伙, 迎接給我留言)

2. 設(shè)計(jì)

2.1 邊框法

html結(jié)構(gòu)

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

css樣式

.box {
    position: relative;
    width: 200px;
    height: 100px;
    background: #ff8605;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}
.box::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 45px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ff8605;
}

瑕玷很顯明, 我們不能通過(guò)box-shadow的體例來(lái)設(shè)置陰影, 陰影會(huì)是一個(gè)盒子

但假如不用設(shè)陰影, 只是必要邊框的話, 我們可以再定義一個(gè)偽類元素, 覆蓋到三角形的下面即可

.box::before {
    position: absolute;
    bottom: -10px;
    left: 45px;
    content: '';
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0, 0, 0, .1);
}

如圖所示

假如要求不嚴(yán)酷好像也夠用了. 但作為一個(gè)嚴(yán)厲的前端工程師! 我們照舊不能容忍這種實(shí)現(xiàn)方法, 下面我們看一看 tranform 方法是如何解決的

2.2 transform方法

這種方法的思路就是使用transform旋轉(zhuǎn)盒子, 一半被上面的容器遮擋, 一半表現(xiàn)出來(lái)

.box::before {
    position: absolute;
    bottom: -5px;
    left: 45px;
    content: '';
    width: 10px;
    height: 10px;
    background: #ff8605;
    transform: rotate(135deg);
    box-shadow: 1px -2px 2px rgba(0, 0, 0, .2);
}

我們好像實(shí)現(xiàn)了我們想要的效果, 但是, 其實(shí)是存在一個(gè)題目的, 但由于我們的陰影面積不夠大, 所以圖片上看起來(lái)不顯明

當(dāng)我們把 box-shadow 的陰影面積擴(kuò)大時(shí), 我們發(fā)現(xiàn)到題目的所在了

盒子凸起來(lái)了, 那怎么解決呢

我們?cè)俣x一個(gè)與容器顏色雷同的盒子, 將上半部分蓋住就可以啦.

/* transform方法 */
.box::before {
    position: absolute;
    bottom: -5px;
    left: 45px;
    content: '';
    width: 10px;
    height: 10px;
    background: #ff8605;
    transform: rotate(135deg);
    box-shadow: 1px -2px 5px rgba(0, 0, 0, .2);
}
.box::after {
    position: absolute;
    bottom: 0px;
    left: 40px;
    content: '';
    width: 20px;
    height: 20px;
    background: #ff8605;
}

要細(xì)致三角形應(yīng)該用 before 定義, 覆蓋的盒子應(yīng)該用 after 定義, 如許盒子才能覆蓋到三角形上面

實(shí)現(xiàn)結(jié)果:

 

3. 最終解決方案代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>CSS實(shí)現(xiàn)帶陰影結(jié)果的三角形</title>
        <style>
            .box {
                position: relative;
                width: 200px;
                height: 100px;
                background: #ff8605;
                box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
            }
            .box::before {
                position: absolute;
                bottom: -5px;
                left: 45px;
                content: '';
                width: 10px;
                height: 10px;
                background: #ff8605;
                transform: rotate(135deg);
                box-shadow: 1px -2px 5px rgba(0, 0, 0, .2);
            }
            .box::after {
                position: absolute;
                bottom: 0px;
                left: 40px;
                content: '';
                width: 20px;
                height: 20px;
                background: #ff8605;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

假如你有更好的實(shí)現(xiàn)辦法, 迎接給我留言

以上就是本文的悉數(shù)內(nèi)容，盼望對(duì)大家的學(xué)習(xí)有所幫助，也盼望大家多多支持圖趣網(wǎng)。

[教程作者：佚名]
關(guān)鍵詞：畫(huà)一 一個(gè) 陰影 三角 三角形 角形 示例 代碼
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://irelandcustomcontracting.com/tutorial/wd492.html
深入理解CSS @font-face性能優(yōu)化
css實(shí)現(xiàn)圖片自適應(yīng)容器的示例代碼
圖趣網(wǎng)微信
建議反饋
×