html +css实现左边一个箭头中间内容右边一个箭头,切换内容
时间: 2024-05-03 08:19:26 浏览: 15
可以使用以下代码实现:
HTML代码:
```html
<div class="container">
<div class="arrow left"></div>
<div class="content">默认内容</div>
<div class="arrow right"></div>
</div>
```
CSS代码:
```css
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
background-color: #f5f5f5;
}
.arrow {
width: 0;
height: 0;
border-style: solid;
}
.left {
border-width: 10px 20px 10px 0;
border-color: transparent #333 transparent transparent;
margin-right: 10px;
cursor: pointer;
}
.right {
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #333;
margin-left: 10px;
cursor: pointer;
}
.content {
padding: 10px;
font-size: 20px;
border: 1px solid #333;
}
```
其中,使用了flex布局,使得左箭头、内容和右箭头水平居中显示。左箭头和右箭头使用了border实现,通过改变border-width和border-color来控制箭头形状和颜色。内容部分可以根据实际需要进行样式调整。左箭头和右箭头可以通过JavaScript来添加点击事件,切换内容。