做个正方体so easy

最新推荐文章于 2023-06-10 23:41:14 发布
最新推荐文章于 2023-06-10 23:41:14 发布
阅读量185 收藏 1
点赞数 1
文章标签： 用border属性完成的拼接图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44543252/article/details/87910743
版权

用border属性完成的拼接图

开发工具与关键技术：DW border属性
作者：徐晶旗
撰写时间：2019年2月24日

接下来我做的就比较简单了,我首先设置了一个大盒子,再到这个大盒子里设置几个类,把这些类拼接成我想要的效果图,把它们分别设置成正方形、三角形和长方形，然后拼接在一起让整个容器看上去是一个正方体。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小迷糊</title>
</head>
<link rel="stylesheet" href="../css/zd.css">
<body>
<div class="box">
	<div class="one">
		<div class="two"></div>
		<div class="three">
			<div class="four"></div>
			<div class="five">
				<div class="six">
					<div class="seven"></div>
				</div>
			</div>
		</div>
	</div>
	</div>
</body>
</html>

Css代码块

@charset "utf-8";
/* CSS Document */

   .box{
		height:200px;
		width:200px;
	}
	.one{
		height:100px;
		width:100px;
		background:#FA8072;
		top:100px;
		left:200px;
		position: absolute;
	}
   .two{
	   border-left:30px solid transparent;
	   border-bottom: 30px solid #E0FFFF;
	   top:-30px;
	   position: absolute;
   }
  .three{
		width:70px;
		height:30px;
		background: #E0FFFF;
		left:30px;
		top:-30px;
		position: absolute;
  }
  .four{
    	border-right: 30px solid transparent;
    	border-top: 30px solid #E0FFFF;
		position: absolute;
		left:70px;
  }
  .five{
   		border-left: 30px solid transparent;
    	border-bottom: 30px solid #FFC0CB;
		position: absolute;
		left:70px;
  }
  .six{
		width:30px;
		height:70px;
		background: #FFC0CB;
		left:-30px;
		top:30px;
		position: absolute;
  }

  .seven{
    	border-right: 30px solid transparent;
		border-top: 30px solid #FFC0CB;
		position: absolute;
		top:70px;
  }

最后完成的效果图
在这里插入图片描述

青柠檬檬哒
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个简单的正方体特效代码
03-20
"一个简单的正方体特效代码"这个项目，就是利用WebGL技术来创建一个基本的3D正方体展示效果。在本文中，我们将深入探讨WebGL的基础知识，以及如何构建一个简单的3D正方体。 WebGL全称为Web Graphics Library，它是...
使用QPainter画一个3D正方体
08-24
使用QPainter画一个3D正方体 在本文中，我们将详细介绍如何使用QPainter画一个3D正方体。QPainter是一个非常强大且灵活的图形绘制工具，它可以帮助我们绘制各种复杂的图形，包括3D图形。在本文中，我们将使用...
使用border画正方形、三角形等
then啥
11-22 978
&lt;div&gt;&lt;/div&gt; div{ width:0; border-top:100px solid blue; border-right:100px solid red; border-bottom:100px solid green; border-left:100px solid orange; }  需要三角形只需将对应的...
菜鸡学Unity 之 先来搞个小游戏玩玩
静心 Study
04-25 806
LZ-Says：学习，就要有无畏的精神，该干就干，who 怕 who？ 前言 Unity内置了官方学习的API，下面附上一个演示图： 点击Help，选择Scripting Reference即可。 而今天，我们一起来玩个小游戏练练手~ 游戏运行效果演示 一、初始化游戏环境 Step 1：创建一个名为：Roll A Ball工程 Step 2：保存...
启航：第一个 three.js 应用
qq_41120857的博客
05-26 483
第一个three.js项目
【ThreeJS】基础教学 创建一个立方体
Ning+
04-24 2186
因为看到ThingJS中的文章http://forum.thingjs.com/thread-55013.htm讲THREE很难学，大家不要被吓到，因为其实是很简单的； 就拿他文章里的代码注释一遍给大家学习参考吧； <!DOCTYPE html> <html lang="en"> <head> <title>three.js web...
WebGL初级 : 在鼠标点击处绘制一个随机颜色的点。
qq_38931004的博客
04-25 827
#涉及到的相关术语解释： 1. 项目1 2. 项目2 3. 项目3
【LGR-142-Div.4】洛谷入门赛 #13 考后分析与题解
BZ_C25LX 的博客
06-10 1537
【LGR-142-Div.4】洛谷入门赛 #13 考后分析与题解
OpenGL.ES在Android上的简单实践：13-全景（画个球）
vx number：zzr_admin，拉入技术交流群。
03-29 1656
OpenGL.ES在Android上的简单实践： 13-全景（画个球） 1、画个球 继续上一节的操作，我们已经通过两次for循环遍历了一个球的所有网格矩形的顶点，并用List存储起来。并且用另外的一个List存储所要画的三角形顶点的索引值。接下来，我们就要开始使用VBO-IBO画出网格矩形，最终画出整个球体出来。 private void initVertexData...
浪漫程序员会表白之抖音旋转立方体照片墙
漫漫前端路，进一寸有进一寸的欢喜
04-20 5830
人分两类，是你和不是你。 时间分两类，你在的时候和你不在的时候。
UE4的编程C++创建一个FPSproject（两）角色网格、动画、HUD、子弹类
weixin_33924312的博客
08-09 1037
    立即归还，本文将总结所有这些整理UE4有关角色的网络格、动画、子弹类HUD一个简单的实现。 （五）角色加入网格   Character类为我们默认创建了一个SkeletaMeshComponent组件，所以我们只须要做的就是使用哪一个静态网格模型。接下来我们为我们的FPSCharacter类创建一个蓝图，这样我们能够简单的把资源指定给静态网格模型这里，而且方便以后操作加入...
正方体OBJ文件
11-15
正方体OBJ文件，opengl作业，自己写的正方体obj文件。
这个是3D正方体
05-31
3D正方体
全球与中国再生涤纶纱市场现状及未来发展趋势（2024版）.docx
08-16
全球与中国再生涤纶纱市场现状及未来发展趋势（2024版）.docx
数据圣域的守护者：SQL第三范式的深度解析
08-16
SQL（Structured Query Language，结构化查询语言）是一种用于管理和操作关系数据库的标准编程语言。它被广泛用于创建、修改、查询和删除数据库中的数据。SQL的主要功能包括： 1. **查询**（Query）：从数据库中检索数据。 2. **插入**（Insert）：向数据库表中添加新的数据行。 3. **更新**（Update）：修改数据库表中的现有数据。 4. **删除**（Delete）：从数据库表中移除数据。 5. **创建**（Create）：创建新的数据库、表、视图等。 6. **修改**（Alter）：修改现有数据库结构，如添加或删除表的列。 7. **授权**（Grant）：为用户设置数据库权限。 8. **撤销**（Revoke）：移除用户的数据库权限。 SQL语言具有以下特点： - **声明性**：用户只需指定要检索或修改的数据，而不需要编写完成这些操作的步骤。 - **高度非过程化**：SQL允许用户以非过程化的方式操作数据，这意味着不需要编写复杂的算法。 - **易于学习和使用**：SQL语法直观，易于理解和编写。 - **跨平台**：
基于Matlab编程的汽车框定[Matlab编程].zip
最新发布
08-16
MATLAB提供了一些功能和工具，可以用于开发运动汽车跟踪系统。以下是一个简单的步骤示例，演示如何使用MATLAB实现一个基本的运动汽车跟踪系统。 步骤1：收集数据 首先，需要收集汽车的运动数据。可以使用传感器（如加速度计、陀螺仪）或车辆控制模块（如车载电脑）收集数据。收集的数据应包括汽车的位置、速度、加速度等信息。 步骤2：数据预处理 收集到的数据可能包含噪音和不完整的信息。因此，需要对数据进行预处理，以减少噪音并填充缺失的数据。预处理步骤可以包括滤波、插值等。 步骤3：运动分析 使用收集到的数据进行运动分析。根据汽车的位置、速度和加速度信息，可以计算汽车的运动特征，如加速度曲线、速度曲线等。 步骤4：跟踪算法 根据运动分析的结果，可以设计跟踪算法来跟踪汽车的运动。跟踪算法可以使用卡尔曼滤波器、粒子滤波器等。MATLAB提供了一些函数和工具箱，可以帮助实现这些滤波算法。 步骤5：显示和可视化 最后，使用MATLAB的图形界面和绘图功能，可以显示和可视化跟踪结果。可以使用MATLAB的图形函数绘制汽车的轨迹、速度曲线等。还可以使用MATLAB的GUI工具，创建一个交互式界面，
python 用GA算法优化BP神经网络，预测回归问题+源代码+文档说明
08-16
<项目介绍> - python 用GA算法优化BP神经网络，预测回归问题 神经网络部分： 网络结构三层：（3,2,1） 数据集： 实验的数据集为：advertise.txt （三个特征输入，一个输出） 其数据形式如下所示：（即求前三个数与最后一个数的关系） 一共有200条数据，训练集和测试集的比例为7:3 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
基于springboot的智慧养老监护平台 源码+数据库（毕业设计）
08-16
基于Vue.js和SpringBoot的智慧养老监护平台是一个综合性的养老服务系统，旨在为老年人提供更加便捷、安全、舒适的生活环境。该平台分为用户前台和管理后台两个部分，以满足不同角色的需求。管理员可以通过管理后台对整个平台进行监控和管理，包括房间信息、房间入住、反馈信息、后勤人员和老人信息等模块。体检员和护工则可以通过用户前台进行日常工作，如查看老人健康信息、记录体检结果、提交反馈等。整个平台采用现代化的前端技术Vue.js和后端框架SpringBoot，保证了系统的稳定性和可扩展性，为用户提供了一个高效、易用、安全的养老服务环境。 录屏：https://www.bilibili.com/video/BV1Cb421b7xP 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
用opengl做一个正方体
03-08
好的，我可以回答这个问题。使用OpenGL可以通过绘制六个面来创建一个正方体，每个面都由两个三角形组成。可以使用glBegin(GL_TRIANGLES)和glEnd()函数来绘制这些三角形，并使用glColor3f()函数来设置每个面的颜色。同时，还需要使用glTranslatef()函数来移动正方体的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值