CSS小技巧 利用border實現三角形箭頭

1.首先，實現把背景色設定為黑色。實現乙個寬高為200px,邊框為100px的盒子。

然後 border-top-width 來設定盒模型的上邊框的寬度為0。 

border-left-color ，border-right-color屬性設定元素的左右邊框顏色為透明(transparent) 。

border-bottom-color 屬性設定底部邊框的顏色為白色。

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
<
style
>
body
div 
style
>
head
>
<
body
>
<
div>
div>
body
>
html
>

2.逐漸減少盒子的width和height，

然後的效果。

所以，當width: 0;height: 0;時，底部邊框就變成了乙個三角形。

三角形箭頭效果源**：

.topbar:before

css中利用border實現三角形箭頭_evenzx的部落格-csdn部落格 

使用css border繪製箭頭_supercoooooder的部落格-csdn部落格 

css簡單實現帶箭頭的邊框_個人文章 - segmentfault 思否 

微信小程式css篇 邊框 Border

一.邊框 border 設定物件邊框的特性。1.語法 border length style color 二.相關屬性。1.border width 設定邊框寬度 常用取值 medium 預設值，相當於3px。thin 1px。thick 5px。不可以為負值。2.border color 設定邊框...

CSS之小技巧

css樣式設計小技巧 水平居中設定 行內元素 如果被設定元素為文字 等行內元素時，水平居中是通過給父元素設定 text align center 來實現的。水平居中設定 定寬塊狀元素 當被設定元素為塊狀元素時用 text align center 就不起作用了，這時也分兩種情況 定寬塊狀元素和不定寬...

css之小技巧

css之小技巧 1.margin的計算規則 margin百分比都是相對於容器的寬度計算的，例如 img div 父元素 位於上60px，左60px2.絕對定位元素的百分比margin 例如 img 位於上102.4px，距離祖先元素的距離3.寬度2 1自適應矩形 box box div4.一側定寬的...