纯CSS3+DIV实现小三角形边框效果的示例代码
这篇文章主要介绍了纯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; */ }总结
到此这篇关于纯CSS3+DIV实现小三角形边框的文章就介绍到这了,更多相关css div 实现三角形边框内容请搜索html中文网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持html中文网！
标签：