css三角左右滑动图片

CSS三角左右滑动图片是一种非常实用的网页设计技巧，可以让网页更加动态和生动。以下是一个简单的实现方法：

.slider {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 800px;
    height: 500px;
}
.slider .slides {
    position: absolute;
    top: 0; left: 0;
    display: flex;
    width: 100%;
    height: 100%;
}
.slider .slides > div {
    flex: 1;
    height: 100%;
}
.slider .slides > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slider .controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
}
.slider .controls > div {
    width: 40px;
    height: 40px;
    margin: 0 10px;
    background-color: #eee;
    border-radius: 50%;
    cursor: pointer;
}
.slider .controls > div:hover {
    background-color: #ddd;
}
.slider .controls > div.active {
    background-color: #333;
    color: #fff;
}
.slider .prev::before,
.slider .next::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
}
.slider .prev::before {
    border-width: 8px 10px 8px 0;
    border-color: transparent #eee transparent transparent;
    margin-top: -8px;
    margin-left: -10px;
}
.slider .next::after {
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent #eee;
    margin-top: -8px;
    margin-right: -10px;
}
.slider .prev:hover::before,
.slider .next:hover::after {
    border-color: transparent #ddd transparent transparent;
}
.slider .prev.disabled::before,
.slider .next.disabled::after {
    border-color: transparent #ccc transparent transparent;
}
.slider .prev.disabled:hover::before,
.slider .next.disabled:hover::after {
    border-color: transparent #ccc transparent transparent;
} 

以上代码定义了一个.slider容器，其中包含了.slides子元素和.controls子元素。通过控制.slides的left值，实现了图片的左右滑动效果；同时，通过添加伪元素:before和:after，实现了左右箭头的样式。通过JavaScript代码，可以实现点击箭头时切换图片。

以上是一个基本的CSS三角左右滑动图片的实现方法，你可以根据自己的需要进行调整和优化。祝愉快！