用JS实现红心效果

最新推荐文章于 2022-11-19 23:43:42 发布

巷口等风

最新推荐文章于 2022-11-19 23:43:42 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： HTML CSS 红心 transform

本文链接：https://blog.csdn.net/qq_37855074/article/details/84592905

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

PS：谷歌浏览器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>红心</title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			.box{
				position:relative;
				width: 200px;
				height: 300px;
				background-color: #fff;
				margin: 100px auto;
			}
			.before,.after{
				position: absolute;
				left: 0px;
				top: 0px;
				width: 200px;
				height: 300px;
				background-color:red;
				border-radius:100px 100px 0 0; 
				transform: rotate(-45deg);
				color: white;
				line-height: 100px;
				text-align: center;
				font-size:30px;
			}
			.after{
				transform: rotate(45deg) translateX(50px) translateY(-50px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="before">HTML</div>
			<div class="after">CSS</div>
		</div>
	</body>
</html>

效果如下图所示：
在这里插入图片描述

巷口等风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JS实现红心效果

PS：谷歌浏览器&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;红心&lt;/title&gt; &lt;style type="text/css"&gt; *{ padding: 0px;
复制链接

扫一扫

专栏目录