CSS绘制git猫

最新推荐文章于 2025-06-10 22:21:26 发布

柒柒兮

最新推荐文章于 2025-06-10 22:21:26 发布

阅读量177

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.youkuaiyun.com/qq_28948031/article/details/119781566

版权

本文将介绍如何利用CSS3的特性，详细步骤解析绘制出一个精致的Git图标。通过学习，你可以掌握CSS3的图形绘制技巧，提升前端设计能力。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a{
   
				position: absolute;
				border: 1px solid #000;
				background: #000;
				width: 268px;
				height: 204px;
				left: 116px;
				top: 77px;
				border-top-left-radius: 137px 94px;
				border-top-right-radius: 137px 94px;
				border-bottom-left-radius: 105px 95px;
				border-bottom-right-radius: 104px 82px;
			}
			.b1{
   
				position: absolute;
				border: 1px solid #000;
				background: #000;
				width: 60px;
				height: 60px;
				transform: rotate(6deg);
				top: 0;
				left: 0;
				border-top-right-radius: 150px 36px;
				border-bottom-left-radius: 43px 95px;
			}
			.b2{
   
				position: absolute;
				border: 1px solid #000;
				background: #000;
				width: 60px;
				height: 60px;
				transform: rotate(-6deg);
				top: -0px;
				right: 0;
				border-top-left-radius: 150px 36px;
				border-bottom-right-radius: 43px 95px;
			}
			.c1{
   
				position: absolute;
				height: 8px;
				width: 98px;
				top: 123px;
				left: -98px;
				border-top-left-radius: 98px 10px;
				border-top: 1px solid #000;
			}
			.c1.l{
   
				width: 120px;

最低0.47元/天解锁文章