css方式实现一种箭头,该箭头样式为一个正方形,在正方形上方取一个等腰三角形放在正方形下方
时间: 2024-03-05 08:50:00 浏览: 18
可以使用CSS的伪元素:before和:after来实现这种箭头的样式,具体的实现如下:
```css
.arrow {
position: relative;
width: 50px;
height: 50px;
background-color: #ccc;
}
.arrow:before {
content: "";
position: absolute;
top: -20px;
left: 10px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ccc;
}
.arrow:after {
content: "";
position: absolute;
bottom: -20px;
left: 10px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ccc;
}
```
在上面的代码中,我们首先定义了一个具有宽度和高度的元素,然后使用伪元素:before和:after来分别创建正方形上方的等腰三角形和正方形下方的等腰三角形。通过设置伪元素的边框属性,我们可以轻松地创建出这种箭头的样式。
你可以将上述代码复制到HTML文件的style标签中,然后在HTML中使用以下代码将箭头添加到页面中:
```html
<div class="arrow"></div>
```
这样就可以在页面上看到这种箭头的样式了。