css三角的做法及其案例,2024年最新面试必会

本文介绍了如何使用CSS创建各种三角形,包括原理和示例代码。作者分享了自己的职业经历,强调自学前端开发的挑战,并推荐了一套全面的学习资料,涵盖了基础知识、移动端开发和常用框架,提倡团队学习和进步.
摘要由CSDN通过智能技术生成

📋 个人简介


  • 💖 作者简介:大家好,我是阿牛😜

  • 📝 个人主页:馆主阿牛🔥

  • 🎉 支持我:点赞👍+收藏⭐️+留言📝

  • 📣 系列专栏:web开发🍁

  • 💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥


请添加图片描述

上期传送门:

👉css中的选择器

👉css盒子模型及其实战案例(上)

👉css盒子模型及其实战案例(下)

👉css网页布局之浮动及其实战案例(超详细)

👉css中的定位详解

👉css中元素的显示与隐藏

👉我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧


这里写目录标题

    • 📋 个人简介
  • 前言

    • css三角的做法
  • 案例-京东效果

  • 结语

前言

=================================================================

今天总结css三角的知识,网页中一些常见的三角形使用css画出来就行,不必做成图片或者字体图标。

css三角的做法


我说的css三角是什么呢,看图

在这里插入图片描述

就是图中圈起来的一部分,这部分我们怎么用css实现呢,一张图就知道怎么做了,接下来分享一下

在这里插入图片描述

css代码

div{

width:0;

height: 0;

line-height: 0;

font-size: 0;

border-left:10px solid purple ;

border-right:10px solid green ;

border-top:10px solid red ;

border-bottom:10px solid blue ;

}

其实原理就是做一个宽高为零的盒子,将边框宽度设置好,就可以得到任意大小的三角形,其中line-height: 0; font-size: 0;是考虑兼容性的,可以不写,

那么,我们要三角形是不是就很简单了,给其它三边颜色弄透明就可以了,我们可以得到各个方向的三角形。

例如:向上的三角形

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
img
img
img
img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新

如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
img

总结

=============================================================

从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。

个人将这段时间所学的知识,分为三个阶段:

第一阶段:HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

  • 推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;如果因为我的笔记太过简陋不理解,可以关注我以后我还会继续分享。

  • 大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。

一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
img

,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。

一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-4pf7jGhB-1712652448978)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值