蓝色箭头线形 背景透明的返回上一页图标
时间: 2024-04-19 22:26:38 浏览: 97
好看的透明图标
您可以使用 CSS 或者 SVG 来创建一个蓝色箭头线形的背景透明的返回上一页图标。以下是两种方法:
1. 使用 CSS:
您可以使用 CSS 的 `::before` 和 `::after` 伪元素来创建一个箭头形状,并设置其背景为蓝色,然后通过设置 `background-color: transparent;` 来使其背景透明。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.back-button {
position: relative;
width: 20px;
height: 20px;
cursor: pointer;
}
.back-button::before, .back-button::after {
content: "";
position: absolute;
top: 50%;
width: 10px;
height: 2px;
background-color: blue;
}
.back-button::before {
transform: rotate(45deg);
}
.back-button::after {
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="back-button"></div>
</body>
</html>
```
您可以将上述代码复制到一个 HTML 文件中并在浏览器中打开,就可以看到一个蓝色箭头线形的背景透明的返回上一页图标。
2. 使用 SVG:
您可以使用 SVG 标签来创建一个蓝色箭头线形的背景透明的返回上一页图标。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path fill="none" stroke="blue" stroke-width="2" d="M14 8l-4 4-4-4"/>
</svg>
</body>
</html>
```
您可以将上述代码复制到一个 HTML 文件中并在浏览器中打开,就可以看到一个蓝色箭头线形的背景透明的返回上一页图标。
希望能对您有所帮助!如果有任何问题,请随时提问。
阅读全文