CSS制作三角形原理:首先创建一个div元素,设置div的width和height为0,只用边框宽来填充,边框样式设置为实线“solid”,边框颜色设置为“transparent”透明,然后给上边框设置颜色和大小。
- 当四个边框都有值时的效果
<style>
/* 边框制作三角形原理 */
.wrapper>div {
/* 宽高设为0px */
width: 0px;
height: 0px;
/* 先设置所有边框全透明 */
border: 100px solid transparent;
/* 在单独设置其中一边的样式 */
border-top: 100px solid red;
border-bottom: 100px solid limegreen;
border-left: 100px solid rgb(65, 170, 234);
border-right: 100px solid rgb(163, 16, 200);
margin: 0 auto;
}
</style>
2.讲左下右边框隐藏,只保留上边框的值,这样三角形就出来了
<style>
/* 边框制作三角形原理 */
.wrapper>div {
/* 宽高设为0px */
width: 0px;
height: 0px;
/* 先设置所有边框全透明 */
border: 100px solid transparent;
/* 在单独设置其中一边的样式 */
border-top: 100px solid red;
margin: 0 auto;
}
</style>