CSS：画出一个直角三角形

已于 2024-08-20 20:05:25 修改
阅读量22 收藏
点赞数
文章标签： css 前端
于 2024-08-20 19:58:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/141366836
版权

想得到下面这个直角三角形：
在这里插入图片描述

下面讲解下制作的演化过程：
1）做出四个三角
在这里插入图片描述

在这里插入图片描述

2）做出左右两个等腰直角三角形：把底下的三角border设置为0，即去掉底下的三角
在这里插入图片描述

在这里插入图片描述

3）将左右两侧的三角形变为非等腰的直角三角形：把顶部的border调大：
在这里插入图片描述

在这里插入图片描述

4）将左侧的三角形变去掉：将左侧的border设置为0
在这里插入图片描述

在这里插入图片描述

5）将顶部的三角变为透明：这样就只剩下右边的直角三角形了
在这里插入图片描述

在这里插入图片描述

上面的过程可以简写形式：
在这里插入图片描述

在这里插入图片描述

听海边涛声
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用CSS如何画等腰三角形和直角三角形
qianniao_yingmo的博客
03-31 3912
如何用CSS去画我们想要的等腰三角形和直角三角形。
css画直角三角形,关于CSS画三角形的那些事
weixin_31659249的博客
08-03 2149
用CSS画一个三角形，是不难的问题，但我却掌握的不够熟练，例如当要求为画一个直角三角形或者等腰三角形，我就有点反应不过来。所以，在这篇中点透它，以后再见，不含糊。原理分析用CSS画三角形，实际上就是在一个框的四边上做文章，如果有一个div，为其设置100px的宽和高，并给其添加10px的黑色边框，这四条边形成一个闭合的正方形，那么这四条边如何分才能达到平均分配的效果呢？那只能是这样：可以看到，每一...
CSS画出三角形、直角三角形、梯形、直角梯形
soullove01的博客
03-12 5480
CSS画出三角形、直角三角形、梯形、直角梯形
css制作一个直角三角形
q1054007919的博客
02-24 540
.triangle { @include widthHeight(0); @include position(absolute); top: pxToRem(1); left: pxToRem(73); right: 0; bottom: 0; ...
CSS画一个向上的直角.docx
02-27
总结起来，使用CSS画一个向上的直角三角形，实质上是通过调整元素的宽高、边框宽度、边框颜色和透明度来实现的。理解这个过程可以帮助我们在设计中更灵活地应用CSS技巧，创造出各种复杂的图形效果。
用CSS3绘制三角形的简单方法
09-25
因为元素的宽度为0，所以只有垂直边框可见，而透明的上、左、下边框与红色的右边框相交，形成了一个直角三角形。 为了更好地理解这个过程，我们可以对比一下有内容宽高时和没有内容宽高时的效果。当元素的宽高不为0...
CSS3 SVG三角形不断放大特效
06-24
例如，一个简单的等腰直角三角形可以用以下代码表示： ```html ,0 L100,0 L0,100 Z" fill="transparent"> ``` 这里，`M0,0`移动到起点，`L100,0`画直线到另一个顶点，`L0,100`再画直线，最后`Z`闭合路径。 ### ...
triangle-generator:CSS三角形代码生成器
05-18
由于边框是直角形状，当我们只对一个或两个边框设置宽度，并将其他边框的宽度设置为0时，浏览器会计算出一个三角形的形状。这个过程涉及以下几个关键步骤： 1. 创建一个带有透明背景的矩形元素。 2. 设置元素的边框...
纯CSS3正多面体旋转动画特效
06-24
例如，可以创建一个方形，然后使用`rotate()`将其旋转45度，以得到一个等腰直角三角形，再将其中的一个边隐藏，就形成了一个等边三角形。 **旋转动画**： CSS3的`animation`属性使得动态效果的实现变得简单。我们...
css实现水滴效果图
yinge0508的博客
08-12 1995
【代码】css实现水滴效果图。
响应式Web设计：纯HTML和CSS的实现技巧
最新发布
Caleb的博客
08-16 782
响应式设计的核心理念是使用灵活的布局和媒体查询来自动调整网页的布局和样式。传统的静态网页设计往往只能适应固定的屏幕尺寸，而响应式设计则能够根据用户设备的不同，自适应地调整内容展示。它允许我们为不同的屏幕尺寸和特性定义不同的CSS样式，从而实现页面的自适应布局。）在响应式设计中非常重要，因为它们可以根据不同的设备和用户设置调整元素的大小。这样，无论图片的实际尺寸如何，它都会根据其容器的宽度自动缩放，从而避免了图片溢出容器的情况。函数，使得网格项在屏幕尺寸变化时自动调整列数和列宽，从而适应不同的显示设备。
PHP 实战：动态更改 CSS 值
withkai44的博客
08-15 244
在上面的代码中，我们首先设定了一个变量 $userFontSize 来模拟获取用户设置的字体大小，然后通过 echo 函数将 CSS 样式输出到页面中。除了直接在服务器端输出或生成 CSS 文件外，还可以结合 JavaScript 来动态更改样式。这种方式更为灵活，可以根据用户的行为实时更改样式。如果需要更改的样式较多，我们也可以选择生成一个新的 CSS 文件。直接输出 CSS 样式。生成新的 CSS 文件。
css-浮动
m0_73882020的博客
08-16 391
不再保留原先的位置。
【CSS】数字英文css没有转换成...换行点、没有换行、拆分的问题（非常常见的需求）
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
08-16 844
默认情况下，连续的英文或数字文本不会在空格处换行，这可能导致布局问题。
CSS使用touch-action属性控制设备的触摸行为
读心悦
08-15 454
CSS 属性是一个用于设置触摸操作（如触摸滑动、双击缩放等）在特定元素上的默认行为如何被浏览器处理的属性。这个属性主要用于优化移动端和触摸设备的交互体验，减少不必要的触摸事件处理或冲突，特别是在处理滚动、缩放等复杂交互时。
CSS基础
ZZPIGKK的博客
08-12 476
2.一般将CSS文件单独写，HTML文件要引入该文件。3.1.1 外部CSS文件，Class选择器的写法v。3.Class选择器在HTML的标签中的使用。6.选择器优先级排序，越精准优先级越高。7.CSS内部嵌套到HTML中的样式。4.ID选择器，一般ID不重复的。5.ID选择器的写法。
css如何使一个盒子水平垂直居中
2201_75773271的博客
08-15 653
方法三：利用 display：flex;方法二：利用 margin:auto;方法一：利用定位(常用方法,推荐）方法四：利用 transform。
CSS image-set()函数与多倍图设置
读心悦
08-15 447
函数是 CSS 中的一个功能，它允许你为不同的屏幕密度（如 Retina 显示屏）指定不同的图像版本。这主要用于提高图像在高清屏幕上的显示质量，同时保持较低分辨率屏幕上的加载速度和性能。然而，需要注意的是，函数并不是所有浏览器都支持的标准 CSS 特性，但它在较新的浏览器（如 Chrome、Firefox 和 Safari）中得到了较好的支持。
css中的background怎么实现直角三角形
03-20
在CSS中，可以使用一些技巧来实现直角三角形的效果。以下是一种常见的方法： 1. 首先，创建一个正方形的元素，设置宽度和高度为0，并隐藏溢出部分： ```css .triangle { width: 0; height: 0; overflow: hidden; } ``` 2. 接下来，通过设置边框的宽度和颜色来定义三角形的大小和颜色： ```css .triangle { border-width: 50px; border-style: solid; border-color: transparent transparent #000 transparent; } ``` 这里的`border-width`表示边框的宽度，`border-style`表示边框的样式，`border-color`表示边框的颜色。通过设置透明的边框颜色，可以实现直角三角形的效果。 3. 最后，可以根据需要调整三角形的位置和旋转角度： ```css .triangle { position: relative; top: 100px; transform: rotate(45deg); } ``` 这里的`position`属性用于设置元素的定位方式，`top`属性用于设置元素相对于其正常位置的垂直偏移量，`transform`属性用于设置元素的旋转角度。 通过以上步骤，就可以实现一个简单的直角三角形效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值