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

最新推荐文章于 2025-05-15 14:36:35 发布

katrinazpc

最新推荐文章于 2025-05-15 14:36:35 发布

阅读量4.4w

点赞数 17

CC 4.0 BY-SA版权

分类专栏：常用CSS整理

本文链接：https://blog.youkuaiyun.com/Che_rish/article/details/78871662

常用CSS整理专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用纯CSS实现右箭头、上下箭头及三角形图标，并展示了如何设置文本溢出时显示省略号的效果。通过简单的CSS代码，可以轻松创建美观的界面元素，并有效管理文本布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

右箭头

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