html 三角邊框,纯CSS3+DIV实现小三角形边框

html代码是这样的

下面用CSS3分别实现向上、下、左、右的三角形

/*箭头向上*/

.arrow-up {

width:0;

height:0;

border-left:30px solid transparent;

border-right:30px solid transparent;

border-bottom:30px solid #fff;

}

/*箭头向下*/

.arrow-down {

width:0;

height:0;

border-left:20px solid transparent;

border-right:20px solid transparent;

border-top:20px solid #0066cc;

}

/*箭头向左*/

.arrow-left {

width:0;

height:0;

border-top:30px solid transparent;

border-bottom:30px solid transparent;

border-right:30px solid yellow;

}

/*箭头向右*/

.arrow-right {

width:0;

height:0;

border-top:50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 50px solid green;

}

小程序示例

wxml

你已选择：上脑

特质：牛上脑是位于肩颈部靠后，脊骨两侧的牛肉，肉质细嫩多汁，脂肪杂交均匀，有好看的大理石花纹，口感绵软，入口即化，脂肪低而蛋白质含量高，适合涮火锅，可煎炸，炸和烧烤。

wxss

.index_sale_lists{

margin: 50rpx 24rpx 0;

background-color: #F2F6F4;

border-radius: 20rpx;

position: relative;

}

.sanjiao{

position: absolute;

left: 50%;

top:-15rpx;

width:0;

height:0;

border-left:10px solid transparent;

border-right:10px solid transparent;

border-bottom:10px solid #F2F6F4;

/* z-index:-1; */

}

内容来源于网络如有侵权请私信删除