Html爱心形样式代码
时间: 2024-09-19 14:07:33 浏览: 34
HTML心形动态满屏爱心代码
5星 · 资源好评率100%
HTML爱心形样式可以通过自定义SVG(Scalable Vector Graphics)或使用CSS伪元素(`:before` 和 `:after`)来创建。以下是几种常见的实现方法:
1. 使用SVG直接插入:
```html
<!DOCTYPE html>
<html>
<body>
<svg height="50" width="50">
<path d="M10 40 L40 60 L10 80 z M40 40 L80 60 L40 80 z" fill="red"/>
</svg>
</body>
</html>
```
这个SVG直接画了一个红色的心形。
2. CSS伪元素+边框(适合简单的形状):
```html
<!DOCTYPE html>
<html>
<head>
<style>
.heart {
position: relative;
width: 70px;
height: 70px;
background-color: transparent;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
border-width: 10px;
border-style: solid;
}
.heart:before {
top: 10px;
left: 10px;
border-color: red transparent transparent red;
}
.heart:after {
bottom: 10px;
right: 10px;
border-color: red transparent transparent red;
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
```
这里的伪元素创建了一个简单的心形边框。
阅读全文