本文摘自PHP中文网,作者藏色散人,侵删。
css写一个直角三角形的方法:首先创建一个HTML示例文件;然后去除底边宽度,实现等腰直角三角形;最后加宽上边宽度,实现想要的直角三角形即可。

本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
利用css写直角三角形
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <style>
.box1{
width: 0;
height: 0;
border-top: 50px solid green;
border-right: 50px solid red;
border-bottom: 0px solid yellow;
border-left: 50px solid blue;
}
.box2{
width: 0;
height: 0;
border-top: 100px solid green;
border-right: 50px solid red;
border-bottom: 0px solid yellow;
border-left: 50px solid blue;
}
.box{
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
</style>
原理第一步,去除底边宽度,实现等腰直角三角形:
<p class = "box1" ></p>
原理第二步,加宽上边宽度,实现想要直角三角形:
<p class = "box2" ></p>
实现,把上边,左边边变透明色:
<p class = "box" ></p>
|
【推荐:《css视频教程》】
效果:
原理第一步,去除底边宽度,实现等腰直角三角形:
阅读剩余部分
相关阅读 >>
css怎么设置div的透明度
css选择器first-child与first-of-type之间有什么区别?
css如何改变图片的颜色
css有什么作用
css如何设置元素水平垂直居中显示
为什么css要初始化
css如何实现图片轮播
服务器加载不了css怎么办
css怎么改变边框颜色
css3中渐变属性有哪些
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css怎么写一个直角三角形