css实现三角形
2021/9/23 13:10:40
本文主要是介绍css实现三角形,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在实际编程中我们经常会遇到下拉菜单的下三角和一些特殊的图形,那么这些如何用css来实现呢?
例1
例2
例3
原理:
仔细想想,原理非常简单,利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0,margin,padding也为0,所以元素框的大小就是他的border的叠加,由于相邻border会重叠,故存在内容宽高时其实任意一边存在的border都是梯形的,当div内容宽高为0时,border就表现为三角形,将四个border的颜色设置为transparent表示边框透明,而将右边框颜色再设置为红色就发现三角形出现了,其实这个三角形是你设置颜色的边框。
<style> div { width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000; } </style> </head> <body> <div></div> </body>
展示结果:
如果想要不同方向的三角形,只需要改变所需的边框颜色,另外三条边改为transparent(透明)。那么我们就能很简单的实现例1和例3的效果
一些不规则的三角形只需要改变边框的宽度就可以得到不同形状的三角形
<style> div{ width: 0px; height: 0px; border-width: 0px 0px 200px 100px; border-style: solid; border-bottom-color:green ; border-left-color:transparent; } </style> </head> <body> <div></div> </body>
展示结果:
这篇关于css实现三角形的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-07TailwindCSS从入门到实践:全面指南
- 2024-09-05Tailwind.css入门:快速上手指南
- 2024-08-29CSS9资料:入门级CSS教程与实用技巧指南
- 2024-08-29CSS定位资料大全:初学者入门指南
- 2024-08-29CSS 浮动资料:入门级教程与实践
- 2024-08-29CSS样式入门:快速获取与掌握CSS样式资料的指南
- 2024-07-18CSS中的伪类
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享