CSS3画三角形

来源：互联网发布：千图网下载源码编辑：程序博客网时间：2024/06/02 04:45

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>

0 0