css上下箭头加一减一

在网页设计中，常常需要用到一些带箭头的按钮，用来表示上下或左右的滚动操作。而这种箭头的样式和效果可以通过CSS来实现。本文将介绍如何用CSS实现一个带有上下箭头的加一减一按钮。

 <div class="btn-group">
    <button class="add"></button>
    <button class="subtract"></button>
  </div> 

我们先使用HTML代码创建一个按钮组，包含一个加一按钮和一个减一按钮。然后用CSS来为按钮添加样式。

 .btn-group{
    display: flex;
    align-items: center;
  }
  .add, .subtract{
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid #ccc;
    position: relative;
    outline: none;
    cursor: pointer;
  }
  .add:before, .subtract:before{
    content: ';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border: 2px solid #666;
    border-top: none;
  }
  .add:before{
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .subtract:before{
    transform: translate(-50%, -50%) rotate(45deg);
  } 

我们首先设置了按钮组的样式，使用flex布局让按钮水平居中。然后定义了按钮的基本样式，包括宽高、背景、边框等。为了实现箭头，我们使用:before伪元素来创建一个白色的三角形，并把它放在按钮中央。使用position: relative让伪元素相对于按钮定位。

接着，我们通过添加border属性，把三角形旋转45度，并让上边框隐藏，即可形成上箭头和下箭头。最后使用transform属性在x和y轴上移动三角形，让它们相对于自身中央对齐。

这样，一个简单的带有上下箭头的加一减一按钮就被创建出来了。我们可以把它添加到表单中，让用户方便地进行数量的选择。