制作心形图案

最新推荐文章于 2023-03-16 20:54:31 发布

浪戟天下

最新推荐文章于 2023-03-16 20:54:31 发布

阅读量1.8k

点赞数

分类专栏：基础文章标签： CSS 前端心形

本文链接：https://blog.csdn.net/weixin_44541467/article/details/90710570

版权

基础专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用CSS技巧来创建心形图案。通过组合两个圆形和一个倒三角形，利用边框属性与颜色以及圆角属性实现。关键在于尺寸比例和透明边框的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面的设计中通常会用到一些用来装饰的图片或者样式，这里我就介绍一下我构思的制作爱心的方法。

分析图形，上面是两个圆形突起，下面是一个锥形。可以由两个圆加上一个倒三角组成。我使用的是正圆和正三角，长度之比是一比根号三。

三角形的制作方法是使用边框属性border确定大小（内容大小为零），再使用边框颜色border-color设置上方边框所需颜色，其它方向透明transparent。通过设置边框颜色就能够获得八个方向的三角形。

圆的制作方法就是使用圆角属性border-radius设置50%的圆角。

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
  <style>
	  .a{
		  width: 0px;
		  height: 0px;
		  border: 86px solid #aad;
		  border-color: #aad transparent transparent transparent;
		  position: relative;
		  top: 80px;
		  left: 120px;
		  border-bottom-width: 0px;
		  border-top-width: 100px;
	  }
	  .b{
		  width: 0px;
		  border: 50px solid #aad;
		  border-radius: 50%;
		  position: relative;
		  top: -173px;
		  left: -91px;
	  }
	  .b:last-child{
		  position: relative;
		  top: -273px;
		  left: -9px;
	  } 
 </style>
</head>
<body>
<div class="a">
	<div class="b"></div>
	<div class="b"></div>
</div>
</body>
</html>