如何用 CSS 实现三角形

最新推荐文章于 2022-12-04 20:38:26 发布

杏子姐_1024

最新推荐文章于 2022-12-04 20:38:26 发布

阅读量479

点赞数

分类专栏：设计模式

本文链接：https://blog.csdn.net/weixin_44135121/article/details/108248761

版权

设计模式专栏收录该内容

30 篇文章 2 订阅

订阅专栏

如何用 CSS 实现三角形

1. 绘制一个拥有四种不同边框颜色的正方形

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .border{
        width:50px;
        height: 50px;
        border-width: 50px;
        border-style: solid;
        border-color: red yellow blue green;
    }
</style>
<body>
<div class="border"></div>
</body>
</html>

效果

在这里插入图片描述

2. 将正方形的宽度设为0，高度可以去掉

备注：不能将宽度去掉，因为 div 为块级标签，去掉宽度值，会平铺整个区域。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .border{
        border-width: 50px;
        border-style: solid;
        border-color: red yellow blue green;
    }
</style>
<body>
<div class="border"></div>
</body>
</html>

效果

在这里插入图片描述

3. 除了某个方向的三角，其他颜色全部设为透明

备注：四个方向的颜色设定分别为上右下左的顺序。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .border{
        border-width: 50px;
        border-style: solid;
        border-color: red transparent transparent transparent;
    }
</style>
<body>
<div class="border"></div>
</body>
</html>