用CSS畫一個帶陰影的三角形的示例代碼

chunquedong 發(fā)布于2019-04-23 11:43 / 1656人閱讀

摘要：思路怎么用畫一個帶陰影的三角形呢有童鞋說這還不簡單嗎網(wǎng)上有很多解決方案但其實大多都是實現(xiàn)不太完美的存在一些問題假設我們做一個向下的三角形箭頭常見的方法大致有兩種通過邊框控制和設為透明設為預定的顏色即可通過旋轉(zhuǎn)盒子方法一可以畫三角形但是

1. 思路

怎么用CSS3畫一個帶陰影的三角形呢 ? 有童鞋說, 這還不簡單嗎網(wǎng)上有很多解決方案, 但其實大多都是實現(xiàn)不太完美的, 存在一些問題

假設我們做一個向下的三角形箭頭常見的方法大致有兩種

通過邊框控制, border-left和border-right設為透明, border-top設為預定的顏色即可
通過 transform 旋轉(zhuǎn)盒子

方法一可以畫三角形, 但是畫陰影是很難做到的(如果做到的朋友, 歡迎給我留言)

2. 設計

2.1 邊框法

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

1 2 3 <body> ????<div class="box">div> body>

css樣式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .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; }

缺點很明顯, 我們不能通過box-shadow的方式來設置陰影, 陰影會是一個盒子

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

1 2 3 4 5 6 7 8 9 .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); }

如圖所示

如果要求不嚴格似乎也夠用了. 但作為一個嚴峻的前端工程師! 我們還是不能容忍這種實現(xiàn)方法, 下面我們看一看?tranform?方法是如何解決的

2.2 transform方法

這種方法的思路就是使用transform旋轉(zhuǎn)盒子, 一半被上面的容器遮擋, 一半顯示出來

1 2 3 4 5 6 7 8 9 10 11 .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); }

我們似乎實現(xiàn)了我們想要的結(jié)果, 但是, 其實是存在一個問題的, 但因為我們的陰影面積不夠大, 所以圖片上看起來不明顯

當我們把?box-shadow?的陰影面積擴大時, 我們發(fā)現(xiàn)到問題的所在了

盒子突出來了, 那怎么解決呢

我們再定義一個與容器顏色相同的盒子, 將上半部分蓋住就可以啦.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 /* 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; }

要注意三角形應該用?before?定義, 覆蓋的盒子應該用?after?定義, 這樣盒子才能覆蓋到三角形上面

實現(xiàn)效果:

3. 最終解決方案代碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <html> ????<head> ????????<meta charset="utf-8" /> ????????<meta name="viewport" content="width=device-width" /> ????????<title>CSS實現(xiàn)帶陰影效果的三角形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>

云服務器 GPU云服務器 html三角形的代碼好玩的python代碼示例 php倒三角的代碼用java畫一個圖

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1069.html

畫三角形

摘要：在商品展示中，畫三角形的出現(xiàn)的也挺多的，左上角的三角標簽，又或者對話形式的三角形，帶陰影效果等，在此記錄下直接添加三角形想你呦比較長的寫法簡單寫法使用偽類添加三角形附帶陰影效果添加兩個偽類一個偽類實現(xiàn)三角形，另一個用定位實在商品展示中，畫三角形的出現(xiàn)的也挺多的，左上角的三角標簽，又或者對話形式的三角形，帶陰影效果等，在此記錄下 1、直接添加三角形 ...

Mr_houzi 2019-08-29 16:26 評論0 收藏0
CSS學習筆記

CSS學習筆記在學習CSS的過程中做的一些記錄，用于未來的快速回憶。 HTML常見元素和理解 head中的元素指定字符集 meta name=viewport content=...定義視圖大小與設備屏幕大小的比例，用戶是否可縮放指定基準路徑 body中的元素 a[href, target] img[src, alt] table td[colspan, rowspan] for...

bawn 2019-08-29 17:27 評論0 收藏0
Canvas API

摘要：圓弧二次貝塞爾曲線及三次貝塞爾曲線繪制二次貝塞爾曲線，為一個控制點，為結(jié)束點。二次貝塞爾曲線三次貝塞爾曲線色彩設置圖形的填充顏色。線段末端以圓形結(jié)束。例如，表示顏色會出現(xiàn)在正中間。操控動畫當設定好間隔時間后，會定期執(zhí)行。矩形 fillRect(x, y, width, height) 填充矩形 strokeRect(x, y, width, height) 繪制矩形邊框 clear...

YuboonaZhang 2019-08-23 12:03 評論0 收藏0
關于Less的學習筆記

摘要：簡介部分記錄是一門預處理語言，它擴充了語言，增加了諸如變量混合函數(shù)等功能，讓更易維護方便制作主題擴充，是一種動態(tài)樣式語言。運算可進行加減乘除的運算。 Less簡介部分記錄： 1、 Less是一門CSS預處理語言，它擴充了CSS語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓CSS更易維護、方便制作主題、擴充，是一種動態(tài)樣式語言。2、編譯工具：Koala。3、注釋（兩種...

姘擱『 2019-08-30 15:52 評論0 收藏0