CSS簡單寫三角形

2021-10-11 09:13:03 字數 553 閱讀 2160

最近寫網頁看到很多小型三角形 就比如:

那麼 怎樣不用ps切圖來做到類似的效果呢

首先:給乙個div盒子,盒子有四個邊 我們設定四個邊為透明色 border的寬度就是我們要的三角形的大小 我們給了乙個透明色之後 我們會看看不到 接下來就是給上我們需要的角顏色 就是套上border-top border-left border-bottom boder-right 四個屬性並給乙個顏色的屬性值 這樣 乙個三角形就出來了

.********
還有那種回到頂部的圖案

乙個很簡單的方法

紅色大盒子裡面放個要做出這種效果的小盒子

我們給border-top 和 border-left 乙個小邊邊

接著將它旋轉45°就好了

如果想要移動位置 就給小盒子套上absolute

給父元素乙個relative

.red

.sanjiao

定位top left right bottom 根據自己需要更改

一點小分享,大佬勿噴。

css繪製向左三角形 CSS繪製三角形

1.繪製乙個外邊框 div 2.重定義外邊框樣式 當外邊框有了寬度,不知大家是否想乙個問題,相鄰的線條邊界在哪,下面通過把外邊框相鄰側邊設定不同顏色來觀察 使用下面的語句替換上面的border定義 border bottom 50px solid 555555 border top 50px sol...

css 修改三角形大小 css實現三角形

最近的乙個專案頁面中,有很多三角形icon,在不考慮ie相容性下,使用了css實現三角形,記錄一下 1 實心三角形,利用transparent實現 1 設定線條寬50px,div 寬高0 width 0px height 0px border right 100px solid red border...

css繪製向左三角形 純css 實現三角形

每天學習乙個小技能 現在的 上 手機上我們經常見到一些下拉列表的下箭頭 其實方式很簡單 直接引入 或者去找字型檔案 隨著技術的發展 前端效能這一方面有很大的提公升 再不能用 或者盡量不適用的情況下 css 也可以繪製簡單的 下面就是三角形 首先這個思路的講解 就是用到了 border 邊框這個屬性 ...