利用css伪类写一个下拉箭头

最新推荐文章于 2024-06-06 11:15:03 发布

何以为皇

最新推荐文章于 2024-06-06 11:15:03 发布

阅读量735

点赞数

分类专栏：伪类文章标签： css

本文链接：https://blog.csdn.net/qq_39352650/article/details/107682363

版权

伪类专栏收录该内容

2 篇文章 0 订阅

订阅专栏

话不多说，直接上代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>利用css伪类写箭头</title>
  <style>
    .box {
      background: none;
      position: relative;
      width: 20px;
      height: 20px;
      overflow: hidden;
      top: 10px;
      left: 10px;
      cursor: pointer;
    }

    .box:after {
      content: "";
      position: absolute;
      top: -7px;
      left: 50%;
      margin-left: -7px;
      z-index: 9;
      width: 10px;
      height: 10px;
      background: #000;
      border: 1px solid #000;
      transform: rotate(-45deg);
      /* 旋转45度*/
      -o-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
    }
  </style>

</head>

<body>
  <!--html结构-->
  <div class="box"></div>
</body>

</html>