CSS3画三角形

最新推荐文章于 2021-08-04 02:18:55 发布

erdouzhang

最新推荐文章于 2021-08-04 02:18:55 发布

阅读量466

点赞数

分类专栏： html5+css3

本文链接：https://blog.csdn.net/erdouzhang/article/details/60967090

版权

html5+css3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.向下

这里写图片描述

transform: translateY(-50%) rotate(45deg); translateY代表Y轴旋转，rotate代表角度。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            width: 12px;
            height: 12px;
            border-right: #000 solid 2px;
            border-bottom: #000 solid 2px;
            transform: translateY(-50%) rotate(45deg);
        }
    </style>
</head>

<body>
    <div></div> 

</body>

</html>

2.向右

这里写图片描述

直接更改旋转角度transform: translateY(-50%) rotate(-45deg);

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            width: 12px;
            height: 12px;
            border-right: #000 solid 2px;
            border-bottom: #000 solid 2px;
            transform: translateY(-50%) rotate(-45deg);
        }
    </style>
</head>

<body>
    <div></div>

</body>

</html>