介绍 html代码是这样的
& lt; div 类=癮rrow-up"祝辞
,,,,& lt; !——向上的三角——比;
& lt;/div>
& lt; div 类=癮rrow-down"祝辞
,,,& lt; !——向下的三角——比;
& lt;/div>
& lt; div 类=癮rrow-left"祝辞
,,,& lt; !——向左的三角——比;
& lt;/div>
& lt; div 类=癮rrow-right"祝辞
,,,& lt; !——向右的三角——比;
& lt;/div>
,
下面用CSS3分别实现向上,下,左,右的三角形/*箭头向上*/.arrow-up {
,,,宽度:0;
,,,身高:0;
,,,border-left: 30 px solid 透明;
,,,边境:30 px solid 透明;
,,,边界底部:30 px solid # fff;
}
,,,,
,/*箭头向下*/.arrow-down {
,,,宽度:0;
,,,身高:0;
,,,border-left: 20 px solid 透明;
,,,边境:20 px solid 透明;
,,,border-top: 20 px solid # 0066 cc的;
}
,,,,
,/*箭头向左*/.arrow-left {
,,,宽度:0;
,,,身高:0;
,,,border-top: 30 px solid 透明;
,,,边界底部:30 px solid 透明;
,,,边境:30 px solid 黄色;
}
,,/*箭头向右*/.arrow-right {
,,,宽度:0;
,,,身高:0;
,,,border-top: 50 px solid 透明;
,,,边界底部:,50 px solid 透明;
,,,border-left:, 50 px solid 绿色;
} & lt; view 类=癷ndex_sale_lists"比;
,,,,,& lt; view 类=皊anjiao"祝辞& lt;/view>
,,,,,& lt; view 类=癷ndex_sale_list"比;
,,,,,,,& lt; view 类=癷ndex_sale_choice"在你已选择:& lt; text>上脑& lt;/text> & lt;/view>
,,,,,,,& lt; view 类=癷ndex_sale_tezhi"比;
,,,,,,,,,& lt; text>
,,,,,,,,,,,特质:牛上脑是位于肩颈部靠后,脊骨两侧的牛的肉,肉质细嫩多汁,脂肪杂交均匀,有好看的大理石花纹,口感绵软,入口即化,脂肪低而蛋白质含量高,适合涮火锅,可煎炸,炸和烧烤。
,,,,,,,,,& lt;/text>
,,,,,,,& lt;/view>
,,,,,& lt;/view>
,,,& lt;/view> .index_sale_lists {
保证金才能:50 rpx 24 rpx 0;
,,背景颜色:# F2F6F4;
,,这个特性:20 rpx;
位置:,才能相对;
}
.sanjiao {
,,,位置:,绝对;
,,,左:,50%;
,,,:-15 rpx;
,,,宽度:0;
,,,身高:0;
,,,border-left: 10 px solid 透明;
,,,边境:10 px solid 透明;
,,,边界底部:10 px solid # F2F6F4;
,,,/*,z - index: 1; */}
这篇“纯CSS3 + DIV怎么实现小三角形边框效果”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“纯CSS3 + DIV怎么实现小三角形边框效果”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。
具体代码如下所示:
小程序示例
wxml
wxs
以上是“纯CSS3 + DIV怎么实现小三角形边框效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
