使用css技术写一个三角形出来（等边或等腰）

最新推荐文章于 2024-03-27 21:00:11 发布

远方的原

最新推荐文章于 2024-03-27 21:00:11 发布

阅读量2k

点赞数

分类专栏： HTML与css 文章标签： css html

本文链接：https://blog.youkuaiyun.com/qq_44890362/article/details/121150498

版权

HTML与css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用CSS来创建等边三角形的两种实用技巧。第一种方法通过旋转三个div元素，利用边框和transform属性组合成等边三角形。第二种方法则是利用边框颜色的透明度差异，仅设置顶部边框颜色，创建出等腰三角形。这两种方法都展示了CSS在形状创建上的灵活性。

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

1.说到写三角形或许很多人会觉得非常简单，不就是用css样式写嘛，有什么难的呢！但是让你现场真正的去写，你可能会想了又想，这里呢。我给大家提供两种思路。

第一种：使用旋转去写。首先给写三个div然后给它设置边框，高默认为0，使用transform属性，然后旋转60度就可以以形成一个等边三角形。源码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            border: 2px solid red;
        }
        
        .b {
            width: 100px;
            border: 2px solid red;
            transform-origin: left top;
            transform: rotate(60deg);
        }
        
        .c {
            width: 100px;
            border: 2px solid red;
            transform-origin: 100px 0;
            transform: rotate(-60deg);
        }
    </style>
</head>

<body>
    <!-- 等边三角形 -->
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>

</body>

</html>

第二种：使用边框去写等腰三角形，比如现在要写一个上面的三角形，就可以让左右边框的颜色为透明，上边的边框有颜色就行，宽高设置为0即可。源码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
        
        .box {
            width: 0;
            height: 0;
            border-top: 100px salmon solid;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            margin: 0px 200px;
        }
    </style>
</head>

<body>
   
    <div class="box">
        <!-- 三角形 -->

    </div>
</body>

</html>