之前一直用css写三角形,反正网上搜一个案例出来,能用就行。今天花了功夫弄懂了原理和使用方法,记录下来,希望能对跟我基础一样弱的人有所帮助。
首先css写三角形是通过border实现的,大多数人用border就是定义边框的。所以要用border来写三角形就会掉到边框的思维模式里面去出不来...
先来一个定义,元素的border其实是三角形组合成的,神不神奇?意不意外?
我们来一段代码证实下这个问题:
.box{ width:50px; height:50px; border-width:50px; border-style: solid; border-color:orange blue red green; }
然后你会发现页面显示是这个样子滴:
弄懂了这个概念那么三角形就好写了,例如我们要角向下的三角形,就把上边框颜色保留,其他三个颜色全部设置成透明“transparent”就行。
所以我们只需要来把上面的代码改成“border-color:orange transparent transparent transparent;”就行,验证下:
果然成功了,弄懂了原理和用法就可以弄出各种三角形了。还可以用多个div盒子拼凑弄出来其他各种各样的图形呢。
相关推荐
- 记录瀑布流+下拉无限加载+lightbox页面踩的坑05-20
- swiper做导航栏时自动跳转至对应分类的代码12-07
- css实现的图片连续横向滚动效果07-31
- html图片和css背景图片哪个先开始加载?css占位图怎么操作?04-10
- css写三角形的原理和使用方法11-30
- 一个输入框调用多个搜索引擎的js代码08-17
- 一个纯html+css的下拉导航动画效果01-24
- JQ特效之:页面向上滚动时弹出模块06-09
- 比较简单易懂的跟随滚动侧栏模块 JQ+html+css03-25
- 一个页面可多处重复使用的简单tab标签jQuery代码01-11
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 2vue3项目引入vant报错的错误原因和解决办法03-12
- 3天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 4zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 5天兴工作室2023双11活动:五折优惠券大放送11-05
- 6腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 7新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 8天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 9[已下线] 天兴工作室2023双节活动:五折优惠券09-29
- 标签聚合
- ×1服务器优惠×1zblog问答主题×1阿里云Hi拼团×1zblog框架×1zblog商城插件×1zblogphp1.3×1zblog基础设置×1风格×1zblog主机×1zblog不同模板×1游戏咨询网站×1zblog评论审核×1售后服务×1zblog三级分类×1dedecms字段调用×1wap插件×1常见问题×1响应式企业主题×1仿煎蛋×1iherd
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求