用css画三角形

最新推荐文章于 2023-02-09 14:28:45 发布

牧马少女

最新推荐文章于 2023-02-09 14:28:45 发布

阅读量167

点赞数

分类专栏：前端技术方案

本文链接：https://blog.csdn.net/qq_36069339/article/details/100103573

版权

前端技术方案专栏收录该内容

54 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Test</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
	<style type="text/css">
        .triangle{
            width: 0px;
            height: 0px;
            border: 80px solid;
        }
        #tri1{
            border-color:red green yellow gray;/* 给border的上右下左边框都设置颜色，颜色区域的宽度为80px */
        }
        #tri2{/* 给border上右左边框的颜色设为透明，下border设为黄色，就形成了一个黄色向上的三角形。 */
            border-color:transparent transparent yellow transparent; 
        }
        #tri3{
            border-color:red transparent transparent transparent;/* 红色向下的三角形。 */
        }
        #tri4{
            border-color:transparent transparent transparent gray; /* 灰色向右的三角形。 */
        }
        #tri5{
            border-color:transparent green transparent transparent; /* 绿色向左的三角形。 */
        }
    </style>
</head>
<body>
    <div id="tri1" class="triangle"></div>
    <div id="tri2" class="triangle"></div>
    <div id="tri3" class="triangle"></div>
    <div id="tri4" class="triangle"></div>
    <div id="tri5" class="triangle"></div>
</body>
</html>

结果：

可调节角度的三角形

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Map Test</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
	<style type="text/css">
        .triangle{
            width: 0px;
            height: 0px;
            border: 80px solid;
        }
        #tri1{
            border-color:transparent transparent yellow transparent;/* 一个向上的黄色三角形 */
            transform: rotate(90deg);/*顺时针旋转90°*/
        }
    </style>
</head>
<body>
    <div id="tri1" class="triangle"></div>
</body>
</html>

一个向上的黄色三角形，顺时针旋转90°，最后输出一个向右的黄色三角形：

牧马少女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用css画三角形

<!DOCTYPE html><html><head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Test</title> <meta name=...
复制链接

扫一扫

专栏目录