css的伪类选择器来实现一些图形
- 爱心
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.heart{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
}
.heart::after,
.heart::before{
content: '';
width: 100px;
height: 150px;
background-color: red;
position: absolute;
border-radius: 50px 50px 0px 0px ;
}
.heart::before{
top: 0px;
transform: translate(-35px) rotate(-45deg);
}
.heart::after{
top: 0px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
- 五边形
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 0px;
height: 0px;
border-width: 80px 80px 60px 80px;
border-color: transparent transparent red transparent;
border-style: solid;
margin:100px auto;
position: relative;
}
div::after{
position: absolute;
width:60px;
height:0px;
border-width: 70px 50px 70px 50px;
border-style: solid;
position: absolute;
content: '';
top: 60px;
left: -80px;
border-color:red transparent transparent transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 无穷大符号
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 190px;
height: 100px;
position: relative;
margin: 100px auto;
}
div::before,div::after{
width: 50px;
height: 50px;
position: absolute;
content: '';
border-style: solid;
border-width: 25px;
border-color: red;
border-radius: 50px 50px 0px 50px;
transform: rotate(-45deg);
}
div::after{
transform: rotate(135deg);
left: 110px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 钻石
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.diamond{
width: 50px;
border:solid;
border-width: 25px;
border-color:transparent transparent red transparent;
position: relative;
}
.diamond::after{
content: '';
border: solid;
border-width: 80px 50px 50px 50px;
border-color:red transparent transparent transparent;
position: absolute;
left: -25px;
top: 25px;
}
</style>
</head>
<body>
<div class="diamond">
</div>
</body>
</html>
- 太极
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 50px;
border-width: 2px 2px 50px 2px;
border-style: solid;
border-color: black;
border-radius: 50%;
margin: 100px auto;
position: relative;
}
div::before{
position: absolute;
content: '';
width: 15px;
height: 15px;
background:#fff;
border-width: 17px;
border-style: solid;
border-color: black;
border-radius: 50%;
top: 25px;
}
div::after{
position: absolute;
content: '';
width: 15px;
height: 15px;
background:black;
border-width: 17px;
border-style: solid;
border-color: #ffffff;
border-radius: 50%;
left: 50px;
top: 25px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 食人花
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 150px;
height: 150px;
border-radius: 50%;
background:red;
margin: 100px auto;
position: relative;
}
div::after{
position: absolute;
content: '';
width: 0px;
height: 0px;
border-style: solid;
left: 100px;
border-color: white;
border-width: 75px;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 六边形
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 173px;
height: 100px;
background-color: red;
margin: 200px auto;
position: relative;
}
div::before{
width: 0px;
height:0px;
border-style: solid;
content: '';
border-color:transparent transparent red transparent;
border-width: 50px 87px 50px 87px;
position: absolute;
top: -100px;
}
div::after{
width: 0px;
height: 0px;
border-style: solid;
content: '';
border-color:red transparent transparent transparent;
border-width: 50px 87px 50px 87px;
position: absolute;
top: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 鸡蛋
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 120px;
height: 170px;
background:red;
margin: 100px auto;
border-radius: 60% 60% 55% 55%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 五角星
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 0px;
height: 0px;
color: red;
border-style: solid;
margin: 100px auto;
border-width: 0px 100px 70px 100px;
border-color: transparent transparent red transparent;
transform: rotate(35deg);
position: relative;
display:block;
}
div::before{
width: 0px;
height: 0px;
content: '';
transform: rotate(-35deg);
border-width: 0px 30px 80px 30px;
border-color: transparent transparent red transparent;
position: absolute;
display: block;
transform: rotate(-35deg);
left:-65px;
top: -45px;
border-style: solid;
}
div::after{
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 梯形
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height:0px;
/* background-color:black; */
margin: 100px auto;
border-style: solid;
border-width: 50px 50px 120px 50px;
border-color: transparent transparent red transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 三角形
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 0px;
height: 0px;
/* background-color:black; */
border-color:transparent transparent blue transparent;
border-width: 100px 100px 150px 100px;
border-style: solid;
margin: 100px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 八角形
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
position: relative;
background:red;
margin: 100px auto;
transform: rotate(-45deg);
}
div::after{
width: 0px;
height: 0px;
content: '';
border-style: solid;
border-width: 50px;
border-color: red;
position: absolute;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 八边形
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 30px;
background: red;
margin: 200px auto;
position: relative;
}
div::before{
position: absolute;
content: '';
width: 50px;
height: 0px;
border-style: solid;
border-width: 30px 25px 30px 25px;
border-color:transparent transparent red transparent;
top: -60px;
}
div::after{
position: absolute;
content: '';
width: 50px;
height: 0px;
border-style: solid;
border-width: 30px 25px 30px 25px;
border-color:red transparent transparent transparent;
top: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 十二角形
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 0px;
height: 0px;
border-width: 50px;
border-style: solid;
margin: 100px auto;
border-color: red;
position: relative;
}
div::before{
content: '';
width: 0px;
height: 0px;
border-width: 50px;
border-style: solid;
border-color:red;
position: absolute;
left: -50px;
top: -50px;
transform: rotate(30deg);
}
div::after{
content: '';
width: 0px;
transform: rotate(60deg);
height: 0px;
border-width: 50px;
border-style: solid;
border-color:red;
left: -50px;
top: -50px;
position: absolute;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 对话框
图片为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 100px;
border-radius: 20px;
margin: 100px auto;
background-color:red;
position: relative;
}
div::before{
width: 0px;
height: 0px;
position: absolute;
content: '';
border-style: solid;
border-width: 10px 40px 10px 0px;
border-color:transparent red transparent transparent;
left:-40px;
top:40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这篇博客是看了原博客来写的，如果对于本片博客有什么问题，可以去看原博客。