标签:绘制 px 65 直角三角形 三角形 border transparent css
背景
用迪卡侬官方主页进行页面练习,发现头部导航栏需要使用到梯形
分析
图形分解
通过图片我们可以发现该梯形可以分解成一个长方形和一个直角三角形,长方形: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;
}
注意:该代码仅为逻辑代码,单独使用效果可能会不太好
标签:绘制,px,65,直角三角形,三角形,border,transparent,css 来源: https://www.cnblogs.com/Lance-Blog/p/16276123.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。