//html： <div> </div>

三角形思路： 元素寬高設(shè)置為0? border的四邊設(shè)置 寬度 實線 顏色（三邊設(shè)置透明， 一邊設(shè)置顏色）

//css:樣式

div {

? ? width: 0;

? ? height: 0;

? ? border-left: 10px solid transparent;

? ? border-right: 10px solid transparent;

? ? border-top: 10px solid transparent;

? ? border-bottom: 10px solid red;

}

//菱形思路： 用定位將兩個三角形拼接

//css:樣式

div {

? ? width: 0;

? ? height: 0;

? ? border-left: 10px solid transparent;

? ? border-right: 10px solid transparent;

? ? border-top: 10px solid transparent;

? ? border-bottom: 10px solid red;

? ? position: relative;

}

div::before {

? ? content: '';

? ? border-left: 10px solid transparent;

? ? border-right: 10px solid transparent;

? ? border-bottom: 10px solid transparent;

? ? border-top: 10px solid red;

? ? left: -10px;

? ? top: 10px;

? ? position: absolute;

}

// 箭頭思路： 兩個三角形層疊 用定位平行隔離兩個像素

// css樣式

div {

? ? width: 0;

? ? height: 0;

? ? border-left: 10px solid transparent;

? ? border-right: 10px solid transparent;

? ? border-top: 10px solid transparent;

? ? border-bottom: 10px solid red;

? ? position: relative;

}

div::before {

? ? content: '';

? ? border-left: 10px solid transparent;

? ? border-right: 10px solid transparent;

? ? border-top: 10px solid transparent;

? ? border-bottom: 10px solid #fff;

? ? left: -10px;

? ? top: -8px;

? ? position: absolute;

}