小三角

作者: kelly_0416 | 来源:发表于2020-04-15 14:43 被阅读0次

箭头朝向那个方向就不用写他的border,在反方向设置颜色 其他方向上的透明度为0

/*箭头向上*/
.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;
}

相关文章

  • CSS实现对话框小三角效果

    效果图 应用场景 一般在模拟对话框类UI时使用 实现思路 利用伪类实现添加小三角 用border制作小三角,小三角...

  • 小鱼(三角插作品)

    首先要学会,如何做出一个可以插的小三角 下面是小三角的步骤 大约准备30个小三角,按照以下步骤插入 最后,也可以找...

  • 纯css写出小三角和气泡对话框

    小三角代码 小三角代码在线演示地址 气泡对话框 气泡对话框在线演示地址

  • css实现小三角,loading

    1、小三角 效果: 2、loading

  • 前端实用css代码片段

    线性小三角 ``` .rightArrow::after{ content:''; display: in...

  • Win10任务栏上小三角设置方法

    win10系统下,如果任务栏小三角不见了,所有程序都平铺在任务栏,想调出小三角的方法如下: 设置-> 个性化 ->...

  • 实战2

    1.刚开始“我的作品”按钮旁边有一个小三角 直接这样添加的话,会出现如下的效果 小三角跑到上面去了,对a或者li增...

  • smpl 模型是什么?

    动画制作相关术语 Vertex(顶点):动画模型可以看成多个小三角形(四边形)组成,每个小三角形就可以看成一个顶点...

  • 小三角

    箭头朝向那个方向就不用写他的border,在反方向设置颜色 其他方向上的透明度为0

  • Eclipse : Loading descriptor for

    1、点击project explore 右侧的小三角,找到customize view 2、进去后选择conte...

网友评论

      本文标题:小三角

      本文链接:https://www.haomeiwen.com/subject/snecvhtx.html