前段学习之**三角制作**_前端开发直角三角-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_54798136/article/details/113920720

本文介绍了如何使用CSS来创建不同方向的三角形，通过设置元素的宽高为0，以及边框颜色和透明度，可以实现从无到有，再到不同形状的三角形。这种方法适用于前端开发中的各种布局和装饰元素，例如京东三角形标志的制作。调整边框宽度可以改变三角形的大小，透明边框用于创建直角。

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

前端学习

前段学习之三角制作

图片展示：
在这里插入图片描述
一、三角制作

1.指定一个没有大小的盒子（要求宽和高必须为0，只设置边框长度）

<style>
    .box1 {
        width: 0;
        height: 0;
        border: 10px solid pink;
     }
</style>
<body>
    <div class="box1"></div>
</body>

一个盒子

2.若把四个边框改成不同的颜色

<style>
    .box1 {
        width: 0;
        height: 0;
        border-top: 10px solid pink;
        border-right: 10px solid red;
        border-bottom: 10px solid blue;
        border-left: 10px solid green;
     }
</style>
<body>
    <div class="box1"></div>
</body>

则如下图所示：
四个三角形

3.若把四个三角形的其中三个设置为透明色，则得到一个三角形

top

<style>
    .box1 {
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: pink;
     }
</style>
<body>
    <div class="box1"></div>
</body>

则如下图所示：
top三角

right

<style>
    .box1 {
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-right-color: red;
     }
</style>
<body>
    <div class="box1"></div>
</body>

则如下图所示：
right三角

bottom

<style>
    .box1 {
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-bottom-color: blue;
     }
</style>
<body>
    <div class="box1"></div>
</body>

则如下图所示：
bottom三角

left

<style>
    .box1 {
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-left-color: green;
     }
</style>
<body>
    <div class="box1"></div>
</body>

则如下图所示：
left三角

若想放大缩小三角，则调节边框大小即可:

eg:

border: 10px solid transparent;
border: 50px solid transparent;
border: 100px solid transparent;

二、三角制作之直角三角形

eg：京东三角制作案例

原理
在这里插入图片描述

如上述 2所示
若把下边框长度设为0：

<style>
    .box1 {
        width: 0;
        height: 0;
        border-top: 10px solid pink;
        border-right: 10px solid red;
        border-bottom: 10px solid blue;
        border-left: 10px solid green;
     }
</style>
<body>
    <div class="box1"></div>
</body>

则如下图所示：（为等腰三角形）

在这里插入图片描述
若想得到直角三角形，则把top边框值设大：

<style>
    .box1 {
        width: 0;
        height: 0;
        border-top: 100px solid pink;
        border-right: 10px solid red;
        border-bottom: 0px solid blue;
        border-left: 10px solid green;
     }
</style>
<body>
    <div class="box1"></div>
</body>

则如下图所示：（为直角三角形）

在这里插入图片描述
把左边框设为0(上边框不能为0）：

<style>
    .box1 {
        width: 0;
        height: 0;
        border-top: 100px solid pink;
        border-right: 10px solid red;
        border-bottom: 0px solid blue;
        border-left: 0px solid green;
     }
</style>
<body>
    <div class="box1"></div>
</body>

则如下图所示：

在这里插入图片描述

做直角三角形：

左边和下边的边框宽度设置为0；
把上边框宽度调大
把上边框颜色设为透明色

<style>
    .box1 {
        width: 0;
        height: 0;
        border-top: 100px solid transparent;
        border-right: 50px solid red;
        border-bottom: 0px solid blue;
        border-left: 0px solid green;
     }
</style>
<body>
    <div class="box1"></div>
</body>

简写代码：

 width: 0;
 height: 0;
 border-color:transparent red transparent transparent;
 border-style:solid;
 border-width: 100px 50px 0 0;

如图所得为直角三角形：

（此为借鉴pink老师前段入门视频所做的笔记，仅供参考。）