CSS画三角形

最新推荐文章于 2024-03-03 10:16:27 发布
最新推荐文章于 2024-03-03 10:16:27 发布
阅读量104 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45218136/article/details/103378889
版权

这是一道面试题，手写用css画出一个三角形。由于长时间没有码代码，一下子忘记怎么写了，更何况有用手写，更没有思路。然后就空了这道题。哎，难过！！
切入正题
在这里插入图片描述这个很明显，呈现的是border为2px的一个正方形
在这里插入图片描述
接着改变box宽高为0，增加border宽度（也要修改border为20px,2px太小了。。尴尬----）
在这里插入图片描述
在这里插入图片描述
在接下来就是将其他三个边框的颜色改透明
在这里插入图片描述
当当档、、、、、
在这里插入图片描述
分享前端技术知识，致力于帮助更多前端人翻过一座座山，踏过一个个坑。

C_小笨笨
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Css画三角形1
08-08
在本例中，我们将探讨如何通过CSS来画出一个加粗边框的三角形。 首先，我们需要理解三角形的构造原理。一个基本的CSS三角形通常由一个具有非零边框的矩形元素构成，但通过设置相邻边框的宽度为0，可以使其塌陷成一...
用css画三角形
04-10
用纯css绘制三角形，不是用图片
前端面试题-css画三角形的方法:
Coder-coco的博客
07-29 493
使用border实现三角形应该是大部分人都掌握的，也是各种面经中经常出现的，利用了高宽为零的容器及透明的border实现。
【前端面试题5】利用 border 属性画一个三角形
Jerryqjr的博客
03-03 582
上面的例子1中，画出来的是直角三角形，可如果我想画等边三角形，要怎么做呢？（3）最后设置border的左边和右边为白色或者。完整代码如下：（用 css 画等边三角形）另外，我们在上方代码的基础之上，再加一个。这样，一个三角形就画好了。
面试题:如何制作一个三角形?
weixin_34384557的博客
12-15 203
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>60.如何制作一个三角形</title> <style> /*想让上下左右哪个方向的三角形消失的
前端学习（1826）：前端面试题之封装函数之实现三角形
歌谣的博客
08-01 257
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; } #box { .
面试题六、利用 CSS 画出三角形图标有多少种方案？
赵花花的博客
02-09 725
利用纯CSS画三角形，你来这里就够了
css 画三角形
清风明月的博客
08-17 340
1、斜边在左边三角形 &lt;style&gt; .triangle { border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid #000; ...
css画三角形和箭头
luoxiaonuan_hi的博客
11-09 968
给定一个宽度和高度都为 0 的元素，其 border 的任何值都会直接相交，我们可以利用这个交点来创建三角形。使用 CSS 绘制三角形的第一种方法就是使用。
css画三角形
花生吃花生的学习记录
11-08 531
原理：css实现画三角形的原理是利用一个盒子，将盒子的宽度和高度都置为0，那么就不会有content的空白区域，其后利用边界border可以更改颜色的特性来进行绘画。 上代码： 四个三角形： #trans{ height: 0px; width: 0px; border-top:50px solid pink; border-right:50px solid black; bord
css画直角三角形,关于CSS画三角形的那些事
weixin_31659249的博客
08-03 2130
用CSS画一个三角形，是不难的问题，但我却掌握的不够熟练，例如当要求为画一个直角三角形或者等腰三角形，我就有点反应不过来。所以，在这篇中点透它，以后再见，不含糊。原理分析用CSS画三角形，实际上就是在一个框的四边上做文章，如果有一个div，为其设置100px的宽和高，并给其添加10px的黑色边框，这四条边形成一个闭合的正方形，那么这四条边如何分才能达到平均分配的效果呢？那只能是这样：可以看到，每一...
使用css画三角形的方法代码
09-25
使用css画三角形的方法代码，大家参考使用吧，下面还有一个兼容IE6的代码
CSS绘制三角形的实现代码(border法)
09-22
在本文中，我们将深入探讨如何使用CSS中的`border`属性来绘制三角形。这种方法基于CSS盒模型中的边框理论，通过巧妙地调整边框宽度和颜色来创造出各种形状的三角形。 首先，理解CSS边框的基本概念是关键。通常，...
在线图书商城平台，资源由网络分享整理，如有侵权请联系我
07-23
网上书店系统是一个基于Web的应用程序，它允许用户在互联网上浏览、选购图书，并进行在线交易。这个系统通常由几个核心组件组成，包括前端用户界面、后台数据库管理、购物车功能、支付接口以及订单处理模块。下面我们将详细探讨这些知识点。 1. ASP.NET：ASP.NET是由微软开发的一个用于构建动态网站、应用程序和Web服务的框架。它支持多种编程语言，如C#，提供了丰富的功能和工具，简化了Web应用的开发过程。在本系统中，ASP.NET可能用于创建网页交互逻辑，处理用户请求并返回响应。 2. C#：C#是一种面向对象的编程语言，常用于构建Windows桌面应用和Web应用。在这个网上书店系统中，C#可能被用来编写服务器端的业务逻辑代码，处理用户输入，访问数据库，以及与各种服务进行交互。 3. 数据库：数据库是存储网上书店系统所有数据的地方，包括书籍信息（如书名、作者、出版社、价格等）、用户信息、订单详情等。常见的数据库管理系统如MySQL、SQL Server或Oracle可能被用于存储和检索这些数据。开发者需要使用SQL语句来设计和操作数据库，确保数据的一致性和完整性。 4. 系统
html+js制作的网页计算机 可以实现加减乘除等运算
最新发布
07-23
大二下半学期的网页设计课程作业 html+js制作的网页计算机 可以实现加减乘除等运算
王江涛六级：完整齐全 课程+资料（百度网盘链接）
07-23
资料包含：讲义，规划导学，六级核心技巧讲解，水平测试解析，考前点睛，写译预测，高频核心词训练营，等等。
springboot整合MinIO中间件，实现文件便捷管理
07-23
springboot整合MinIO中间件，实现文件便捷管理
运用蚁群算法的3D路径规划Matlab实现方案
07-23
三维路径规划指在已知三维地图中，规划出一条从出发点到目标点满足某项指标最优，并且避开了所有三维障碍物的三维最优路径。现有的路径规划算法中，大部分算法是在二维规划平面或准二维规划平面中进行路径规划。一般的三维路径规划算法具有计算过程复杂、信息存储量大、难以直接进行全局规划等问题。已有的三维路径规划算法主要包括A*算法、遗传算法、粒子群算法等，但是A*算法的计算量会随着维数的增加而急剧增加，遗传算法和粒子群算法只是准三维规划算法。 蚁群算法具有分布计算、群体智能等优势，在路径规划上具有很大潜力，在成功用于二维路径规划的同时也可用于三维路径规划，代码采用蚁群算法进行水下机器人三维路径规划。。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
html加css画三角形
06-05
可以使用CSS3的 `border` 属性来实现一个三角形，具体代码如下： ...需要注意的是，这里的三角形是等腰直角三角形，如果需要画其他形状的三角形，需要调整 `border-width` 和 `border-color` 属性的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值