ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

如何使用css绘制三角形

2022-05-16 11:02:36  阅读:188  来源: 互联网

标签:绘制 px 65 直角三角形 三角形 border transparent css


背景

用迪卡侬官方主页进行页面练习,发现头部导航栏需要使用到梯形

分析

图形分解

通过图片我们可以发现该梯形可以分解成一个长方形和一个直角三角形,长方形:110*65;直角三角形:11*65(底边*另一个直角边)

三角形代码分析

我们的重点就是那个如何使用css来绘制那个直角三角形(不考虑位置问题)

首先,如果元素里面没有任何内容或padding时,它的四个border是四个三角形,如下图


根据需求得知我们需要显示左边和下边的border,即border-leftborder-bottom需要有颜色,其他边为transparent

但是需求要的是不等腰直角三角形(11*65),要求三角形的底边为11px,高度为65px

底边=三角形d的高+三角形b的高;高度=三角形c的高+三角形a的高

因此border-leftborder-right的值为11 / 2 = 5.5px,border-bootomborder-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. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有