CSS border 属性实现三角形

最新推荐文章于 2025-06-16 00:15:47 发布

aganliang

最新推荐文章于 2025-06-16 00:15:47 发布

阅读量854

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： CSS border 属性

本文链接：https://blog.youkuaiyun.com/aganliang/article/details/87869925

前端专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何利用CSS边框属性创建各种形状和图案，包括三角形、梯形及其他复杂图标，展示了通过调整元素尺寸和边框宽度实现图形变化的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS border 属性用于设置四个边框样式

直接看使用方法：

.sjx:before{
    content: '';
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #FFC;
    border-top: 80px solid #0F0;
    border-right: 80px solid #09C;
    border-bottom: 80px solid #9F9;
    border-left: 80px solid #FC3;
}

可以看到块状元素宽度和高度都是100px，四个边框都是80px，边框的绘制是梯形。

那么假如块状元素的宽度和高度变成0px的时候，四个边框就变成了三角形。

.sjx:before{
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    background: #FFC;
    border-top: 80px solid #0F0;
    border-right: 80px solid #09C;
    border-bottom: 80px solid #9F9;
    border-left: 80px solid #FC3;
}

如果仅仅写一个边框的话，边框又变成一个矩形：边框下面的块状元素就是20px * 20px

.sjx:after{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;

	border-top: 100px solid #0F0;
	position: relative;
	top: 2px;
	left: 10px;
}

显示一个小三角形：

.sjx:after{
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
	border: 8px solid transparent;
	border-top: 8px solid #212121;
	position: relative;
	top: 2px;
	left: 10px;
}

显示其他的图标：

.sjx:after{
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
/*	border: 8px solid transparent;*/
	border-top: 80px solid #212121;
	border-right: 180px solid red;
	position: relative;
	top: 2px;
	left: 10px;
}

再比如：

.sjx:after{
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
/*	border: 8px solid transparent;*/
	border-top: 80px solid #212121;
	border-right: 180px solid red;
	border-bottom: 100px solid #FC3 ;
	position: relative;
	top: 2px;
	left: 10px;
}