如何使用css绘制三角形
2024-10-20 15:50:08
背景
用迪卡侬官方主页进行页面练习,发现头部导航栏需要使用到梯形
分析
图形分解
通过图片我们可以发现该梯形可以分解成一个长方形和一个直角三角形,长方形:110*65;直角三角形:11*65(底边*另一个直角边)
三角形代码分析
我们的重点就是那个如何使用css来绘制那个直角三角形(不考虑位置问题)
首先,如果元素里面没有任何内容或padding时,它的四个border是四个三角形,如下图
根据需求得知我们需要显示左边和下边的border,即border-left
和border-bottom
需要有颜色,其他边为transparent
但是需求要的是不等腰直角三角形(11*65),要求三角形的底边为11px,高度为65px
底边=三角形d的高+三角形b的高;高度=三角形c的高+三角形a的高
因此border-left
和border-right
的值为11 / 2 = 5.5px,border-bootom
和border-top
的值为65 / 2 = 32.5px
最终代码
<span id="triangle"></span>
#triangle {
border-color: transparent transparent #edeff1 #edeff1;
border-style: solid;
border-width: 32.5px 5.5px;
}
注意:该代码仅为逻辑代码,单独使用效果可能会不太好
最新文章
- UITextView回收或关闭键盘
- Infinite Scroll - jQuery &; WP 无限滚动插件
- 10. JEB1.5 插件编写二
- xcode ___gxx_personality_v0"; 编译错误
- nginx 搭配 lua
- 简单理解Hibernate三种状态的概念及互相转化
- 将一个应用程序添加做成windows服务
- BZOJ 1697: [Usaco2007 Feb]Cow Sorting牛排序
- svn 提交 commit慢
- C# 异步操作
- Java的IO以及线程练习
- web乱码问题
- GO interface显示类型转换方法
- Ibatis insert语句插入null引发的错误
- 用于Mysql操作的MySqlHelper类
- C++关于string的一些用法
- Emoji表情编解码库XXL-EMOJI
- React中使用CSS
- 大众点评Cat--架构分析
- 3 springboot配置文件
热门文章
- LeetCode-396 选转函数
- LeetCode-156 上下翻转二叉树
- libcurl CURLOPT_WRITEFUNCTION 回调函数多次触发导致数据错乱的问题
- k8s-分布式系统架构master-worker
- mysql 百万计数据导入--Load data infile
- [Maven] 引入依赖以后如果标红怎么办
- VMware-安装rpm包出现警告:tigervnc-1.1.0-24.el6.x86_64.
- 【问题】Windows(CR LF)和Unix(LF)
- C++ 中的匿名函数(lambda表达式)
- XCZU19EG板卡设计资料:610-基于6U VPX 的FPGA XCZU19EG存储阵列