css作图-图像头像

爱吃提子8

已于 2023-09-22 16:57:13 修改

阅读量169

点赞数

分类专栏：代码绘画艺术文章标签： css

于 2023-09-06 17:06:36 首次发布

本文链接：https://blog.csdn.net/qq_44844162/article/details/132714030

版权

代码绘画艺术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css作图-图像头像

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .circle-with-triangles {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 50%;
    position: relative;
	top:200px;
	left:  30px;
  }

  .triangle {
    width: 0;
    height: 0;
    position: absolute;
    transform: translate(-50%, -50%);
  }

  .triangle.triangle-top {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 30px solid peachpuff;
    top: 10px;
    left: 8x;
	transform:rotate(76deg);
  }

  .triangle.triangle-bottom {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 30px solid peachpuff;
    top: 10px;
    left: 159px;
	transform:rotate(-14deg);
  }
  .moon {
    width: 80px; /* 修改为 80px */
    height: 100px; /* 修改为 100px */
    background-color: #f1c40f;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
  transform: translate(55px, 60px); /* 同时向下移动 20px，向右移动 55px */  
/*  	margin-top: 90px; /* 向下移动 20px */
  /* 	margin-left: 50px; */ */
  }
  
  .moon::before {
    content: "";
    width: 80px; /* 修改为 80px */
    height: 100px; /* 修改为 100px */
    background-color: #3498db;
    border-radius: 50%;
    position: absolute;
    bottom:20px;
  }
</style>
<title>Circle with Triangles</title>
</head>
<body>
  <div class="circle-with-triangles">
    <div class="triangle triangle-top"></div>
    <div class="triangle triangle-bottom"></div>
    <div class="moon"></div>
  </div>
</body>
</html>

在这里插入图片描述

.circle-with-triangles 类定义了一个圆形区域，宽高为200px，背景颜色为#3498db（深蓝色），边框半径为50%，并且相对定位于其父元素中。
.triangle 类定义了一个三角形，宽度和高度都为0，并使用绝对定位使其居中显示。
.triangle.triangle-top 和 .triangle.triangle-bottom 类分别给两个三角形添加了特定的样式。.triangle- top 是一个底部尖向上的三角形，背景颜色为peachpuff（桃粉色），位置稍微偏移到左上方，并且使用 transform: rotate(76deg); 实现了旋转。
.triangle-bottom 是一个顶部尖向下的三角形，背景颜色同样为peachpuff，位置稍微偏移到右上方，并且使用 transform: rotate(-14deg); 实现了旋转。
.moon 类定义了一个半月形，宽度为80px，高度为100px，背景颜色为#f1c40f（淡黄色），边框半径为50%，相对定位于其父元素中，并使用 transform: translate(55px, 60px); 同时向下和向右移动了一定的距离。
.moon::before 伪元素被用来创建半月形的底部阴影部分。它与 .moon 具有相同的尺寸和背景颜色，绝对定位于 .moon 元素内的底部位置。

爱吃提子8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css作图-图像头像

moon 类定义了一个半月形，宽度为80px，高度为100px，背景颜色为#f1c40f（淡黄色），边框半径为50%，相对定位于其父元素中，并使用 transform: translate(55px, 60px);同时向下和向右移动了一定的距离。.circle-with-triangles 类定义了一个圆形区域，宽高为200px，背景颜色为#3498db（深蓝色），边框半径为50%，并且相对定位于其父元素中。.triangle 类定义了一个三角形，宽度和高度都为0，并使用绝对定位使其居中显示。
复制链接

扫一扫