三角的制作方法

科院彭于晏

于 2022-05-09 17:12:31 发布

阅读量256

点赞数

文章标签： css3 css javascript

本文链接：https://blog.csdn.net/yanhn123/article/details/124670404

版权

本文介绍了两种使用CSS创建三角形的方法：通过设置边框颜色使部分边框透明，以及通过旋转元素显示部分边框。这些技巧在前端开发中常用于箭头、指示器等图形的制作。同时，还展示了如何通过CSS的transform属性来实现元素的旋转，以创建独特的视觉效果。

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

1. 利用盒子的边框, 将盒子的长度和宽度等于0,最后显示一边的边框,即可形成三角形

 div{
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-right: 100px solid yellow;
            border-bottom: 100px solid blue;
            border-left: 100px solid green;

        }

这是四个边框的形状,每个都是三角形,只需要把其他三个边框设置为透明,就可以只出现一个三角形

 div{
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-top-color: brown;
}

2. 将盒子旋转,然后显示他的两个相邻边框,即是一个三角

div{
            width: 100px;
            height: 100px;
            border-bottom: 1px solid red;
            border-right: 1px solid red;
            transform: rotate(135deg);
}