css三角形上下箭头点击 |css图形圆角

方法一：

.arrow-up {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #000;
}
.arrow-down {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
}

这种方法使用了三角形边框的原理，即利用 border 的不同边框样式来画出三角形。

方法二：

.arrow-up {
position: relative;
display: inline-block;
width: 10px;
height: 10px;
}
.arrow-up::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 5px;
height: 5px;
background-color: #000;
}
.arrow-up::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 5px;
height: 5px;
background-color: #000;
}
.arrow-down {
position: relative;
display: inline-block;
width: 10px;
height: 10px;
}
.arrow-down::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 5px;
height: 5px;
background-color: #000;
}
.arrow-down::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 5px;
height: 5px;
background-color: #000;
}

这种方法则是利用伪元素和 transform 来制作三角形，具有一定的灵活性。

当三角形箭头作为上下翻页的按钮时，大家可以使用 JavaScript 为其绑定点击事件，并实现各自的功能。代码如下：

var prevBtn = document.getElementById('prev');
var nextBtn = document.getElementById('next');
prevBtn.addEventListener('click', function() {
// 上一页功能实现代码
});
nextBtn.addEventListener('click', function() {
// 下一页功能实现代码
});

综上所述，使用 CSS 制作三角形箭头并绑定点击事件，无论是在网站设计中还是日常开发中都非常实用。