css整理 -- 右箭头，上下箭头，三角形

右箭头

.right-arrow {display :inline-block;position: relative;width: 36rpx;height: 36rpx;margin-right: 20rpx;
}.right-arrow::after {display: inline-block;content: " ";height: 18rpx;width: 18rpx;border-width: 4rpx 4rpx 0 0;border-color: #c7c7cc;border-style: solid;transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);position: absolute;top: 50%;right: 6rpx;margin-top: -9rpx;
}

右箭头效果：

上下箭头

// 下箭头
.down-arrow {display :inline-block;position: relative;width: 40rpx;height: 30rpx;margin-right: 20rpx;
}.down-arrow::after {display: inline-block;content: " ";height: 18rpx;width: 18rpx;border-width: 0 2rpx 2rpx 0;border-color: #999999;border-style: solid;transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);transform-origin: center;transition: transform .3s;position: absolute;top: 50%;right: 10rpx;margin-top: -10rpx;
}
// 加上active旋转成 上箭头
.down-arrow.active::after {transform-origin: center;transform: rotate(-135deg);transition: transform .3s;
}

上下箭头效果：

三角形

.triangle {display: inline-block;position: relative;top: 6rpx;margin-left: 10rpx;width: 0;height: 0;border: 10rpx solid transparent;border-top-color: @colorGray2;
}

三角形效果：

超出省略号
line-1:超过1行就显示省略号
line-n:超过n行就显示省略号

.line-1,
.line-2 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;
}.line-1 {-webkit-line-clamp: 1;
}.line-2 {-webkit-line-clamp: 2;
}

css整理 -- 右箭头，上下箭头，三角形相关推荐

【技能】使用纯CSS+html写出方向箭头，简单大方，好看
使用纯CSS+html写出方向箭头,贴出来就可以用,100%原创 <html><head><title></title><meta http-eq ...
html select更改箭头样式,下拉列表-select样式css处理，可改变箭头的颜色
下拉列表-select样式css处理,可改变箭头的颜色 2018-11-26 css处理下拉列表 .IN {BORDER-RIGHT: #afaeae 1px solid; BORDER-TOP: # ...
如何在UITableViewCell的中添加向右箭头和箭头前的文本
如何在UITableViewCell的中添加向右箭头和箭头前的文本 2014-10-01 20:12:26来源:CSDN作者:u01362386710391人点击 1.首先说的是添加向右的箭头,这个很 ...
解决github文件夹有向右的白色箭头并且不能打开的解决办法
GitHub中的文件夹出现上图情况出现原因: 因为一些原因github将他视为一个子系统模块,导致在上传代码时该文件夹上传失败,并在github上显示向右的白色箭头. 解决方法: 1.删除这个文件中 ...
用 CSS 画一个带阴影的三角形
1. 思路怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
【css】用css画圆，半圆和三角形
用css画圆,半圆和三角形圆,半圆三角形圆,半圆 // 圆宽高相等, border-radius大于宽度的一半 .circle{width: 100px;height: 100px;backg ...
html css整理笔记,HTML CSS整理笔记 (八) 定位网页元素
----8 定位网页元素---- 51.Position属性:指定盒子的位置,相对它父级的位置或它自身应该在的位置. (1)static 默认无定位,元素按照标准文档布局. (2)relative相对 ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...

css整理 -- 右箭头，上下箭头，三角形

css整理 -- 右箭头，上下箭头，三角形相关推荐

最新文章

热门文章