学习H5基础知识
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>小文学习文档</title>
<style>
body{margin: 0;
}
.heart{width:100px;
height:100px;
position: relative;
top:30px;
left:0;
right: 0;
bottom: 0;
margin: auto;
background: red;
}
.heart:before{
position: absolute;
top:0;
right: 0;
bottom: 0;
margin: auto;
width: 30px;
height: 50px;
content: '';
border-radius: 30px 30px 0 0;
background: white;
left: 30%;
}
.heart:before{
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after{
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 30px;
height: 50px;
content: '';
border-radius: 30px 30px 0 0;
background: white;
left: -30%;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
</style>
</head>
<body>
<main>
<div class="heart"></div>
</main>
</body>
</html>
哈哈，怎么跑外面出了？晕啊 问好小文，是一个小红星吗？ 梦江南 发表于 2025-6-18 11:26
问好小文，是一个小红星吗？
江南兄，是小红心，没弄好，跑页面外面去了。呵呵，没学好。问好！{:4_191:} 挺好看的，有意思。设置一下定位就在里面了。{:4_204:} 红影 发表于 2025-6-18 12:56
挺好看的，有意思。设置一下定位就在里面了。
恩师，下午好！还没有学会，不知道怎么弄呢？呵呵！{:4_204:}{:4_170:} 小文 发表于 2025-6-18 13:54
恩师，下午好！还没有学会，不知道怎么弄呢？呵呵！
下来了，小文看看可以么{:4_173:} 红影 发表于 2025-6-18 17:08
下来了，小文看看可以么
恩师太了不起了，小文还一直在网上查原因呢！谢谢先生！回头我再看看先生是怎么办到的，真好！{:4_191:} 小文 发表于 2025-6-18 17:13
恩师太了不起了，小文还一直在网上查原因呢！谢谢先生！回头我再看看先生是怎么办到的，真好！
就是把第一个的position: absolute;换成了position: relative; 然后就好了{:4_173:} 红影 发表于 2025-6-18 17:42
就是把第一个的position: absolute;换成了position: relative; 然后就好了
感谢恩师指点，原来是位置问题。把绝对位置改成相对位置才行，总算真正明白了。好开心，谢谢恩师！{:4_191:} 小文 发表于 2025-6-18 18:23
感谢恩师指点，原来是位置问题。把绝对位置改成相对位置才行，总算真正明白了。好开心，谢谢恩师！{:4_19 ...
我也不是很懂，去试了试，发现可以，应该就是这原因了{:4_173:}
页:
[1]