热门关键字:
jquery > jquery教程 > jquery教程 > 纯CSS3+DIV实现小三角形边框效果的示例代码

纯CSS3+DIV实现小三角形边框效果的示例代码

282
作者:管理员
发布时间:2021/8/6 18:22:15
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5246
  具体代码如下所示:


  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;


  }


  总结




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐