资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

纯CSS3+DIV怎么实现小三角形边框效果

这篇“纯CSS3+DIV怎么实现小三角形边框效果”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“纯CSS3+DIV怎么实现小三角形边框效果”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。

创新互联公司成都网站建设定制网站开发,是成都网站设计公司,为服务器托管提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站制作热线:18982081108

具体代码如下所示:

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; }

小程序示例

纯CSS3+DIV怎么实现小三角形边框效果

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怎么实现小三角形边框效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前名称:纯CSS3+DIV怎么实现小三角形边框效果
文章网址:http://cdkjz.cn/article/jcdcgo.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220