CSS：CSS实现三角形

最新推荐文章于 2024-07-28 15:07:19 发布

HiLiou

最新推荐文章于 2024-07-28 15:07:19 发布

阅读量114

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/HiLiou/article/details/108400575

版权

Triangle.css

:root{
    --long: 20px;
    --short: 10px;
    --border-color: red;
}
/* 上三角形 */
.triangle_top{
    height: 0;
    width: 0;
	border-bottom: var(--long) solid var(--border-color);
    border-right: var(--short) solid transparent;
    border-left: var(--short) solid transparent;
}
/* 右三角形 */
.triangle_right{
    height: 0;
	width: 0;
	border-left: var(--long) solid var(--border-color);
    border-top: var(--short) solid transparent;
    border-bottom: var(--short) solid transparent;
}
/* 下三角形 */
.triangle_bottom{
    height: 0;
	width: 0;
	border-top: var(--long) solid var(--border-color);
    border-right: var(--short) solid transparent;
    border-left: var(--short) solid transparent;
}
/* 左三角形 */
.triangle_left{
    height: 0;
	width: 0;
	border-right: var(--long) solid var(--border-color);
    border-top: var(--short) solid transparent;
    border-bottom: var(--short) solid transparent;
}
/* 左上三角形 */
.triangle_Rtop{
    height: 0;
	width: 0;
	border-top: var(--long) solid var(--border-color);
    border-right: var(--long) solid transparent;
}
/* 左下三角形 */
.triangle_Rbottom{
    height: 0;
	width: 0;
	border-bottom: var(--long) solid var(--border-color);
    border-right: var(--long) solid transparent;
}
/* 右上三角形 */
.triangle_Ltop{
    height: 0;
	width: 0;
	border-top: var(--long) solid var(--border-color);
    border-left: var(--long) solid transparent;
}
/* 右下三角形 */
.triangle_Lbottom{
    height: 0;
	width: 0;
	border-bottom: var(--long) solid var(--border-color);
    border-left: var(--long) solid transparent;
}