仅使用HTML元素通过CSS样式制作一个小三角

最新推荐文章于 2023-01-31 09:48:46 发布

翻译最新推荐文章于 2023-01-31 09:48:46 发布 · 594 阅读

css 同时被 2 个专栏收录

37 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

本文介绍两种创建CSS三角形的方法：一种是使用CSS3的旋转特性；另一种是利用边框属性，通过对元素尺寸设置为0并仅保留特定方向的边框来实现。文章详细展示了如何通过简单的边框设置来创建一个红色的小三角形。

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

制作小三角有两种常用的方式，

1：是CSS3种的方法，通过旋转一个div元素45度，然后定位到外部div的某一边，把多余的用overflow：hidden;遮住，来获取一个三角形，但是这种方法兼容性不是很好，而且之前的浏览器也没有旋转属性，

2：通过边框属性,来制作小三角.

我们可以看到,边框和边框之间是45度斜着分割的,如果我们把元素尺寸设置为0 ,仅仅留下边框,就能获得四个不同颜色的三角形.

如果想要留下某一个方向的小三角形，那就把其他三个方向的边框颜色全部设置为 : transparent (此属性是隐藏某个边框的颜色)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用边框做出来一个小三角</title>
    <style>

        /*制作边框小三角*/

        body{
            padding: 100px;
        }

        div{
            width:0;
            height: 0;
            border:50px solid;
            border-color:transparent transparent red transparent;
            
        }
    </style>
</head>
<body>

    <div></div>
</body>
</html>