HTML+CSS实现三角形

最新推荐文章于 2023-03-17 02:00:00 发布

原创最新推荐文章于 2023-03-17 02:00:00 发布 · 524 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5 #css3 #javascript

HTML+CSS 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何仅用HTML和CSS创建一个简单的三角形，通过设置border属性来实现不同的颜色和透明度，适合前端开发者快速掌握基本的CSS布局技巧。

HTML+CSS实现三角形

使用HTML+CSS实现三角形

作为一个前端开发者，很多页面样式和效果可以通过UI组件库来引用，当然也可以自己手写，今天为大家展示一个HTML+CSS实现三角形的样式，废话不多说，直接上代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sanjiao {
            width: 0;
            height: 0;
            border: 5px solid transparent;
            /* border-top-color: tomato; */ 设置三角形的视角方向
            /* border-bottom-color: tomato; */
            /* border-left-color: tomato; */
            border-right-color: tomato;
        }
    </style>
</head>

<body>
    <div class="sanjiao">
    </div>
</body>

</html>

好了，就是这么简单