h5开发｜别切图了 用CSS手写一个箭头吧

小狼哥
4,875 阅读2分钟

h5设计稿中经常会有一些小图标，很多时候为了快速开发都是直接切图，再打包成雪碧图。为了提升自己，有时候要做点麻烦但有意义的事情。今天来聊聊咋用CSS搞一个分页箭头，最后再封装一下，变成一个UI组件，方便以后使用。

话说分页箭头长啥样？就长下面这样：

箭头.png

看完了吧，是不是很熟悉。那就开干吧。

1. 实现思路

用CSS直接实现上面的箭头肯定比较麻烦，我们换个思路：把箭头顺时针旋转45度看成半个正方形：

whiteboardappdotorg20210421231705.png

聪明的同学肯定想到了，那么我们要做的肯定是先画出半个正方形，然后再旋转即可。

  • 第一版 html
<div class="arrow"></div>

CSS

.arrow {
  margin: 50px auto;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  border: solid red;
  border-width: 0 6px 6px 0;
}

效果

image.png

半个正方形已经画出来了，想要实现箭头只需要旋转相应角度即可。

右箭头

  transform: rotate(-45deg);

image.png

下箭头

  transform: rotate(45deg);

image.png

左箭头

  transform: rotate(135deg);

image.png

上箭头

  transform: rotate(-135deg);

image.png

至此，我们已经知道如何绘制箭头了，这才是第一步，想要实现设计稿的箭头还需要按照UI同学给的尺寸来。下面讲讲怎么根据设计稿尺寸来计算箭头尺寸。

2. 计算公式

whiteboardappdotorg20210421230841.png

想要计算箭头尺寸，需要知道s的大小。s可以通过w、h(查看图片属性可看到对应图片的宽高)计算得到。然后还需要知道箭头的粗（borderWidth），这个通过ps标尺工具就可以量出来。综上，我们需要知道三个参数：

  • 图片宽度w；
  • 图片高度h；
  • 箭头粗度borderWidth；

箭头大小s = (w^2 + (h / 2)^2)^(1/2)。

根据上面公式，我们就可以封装成一个UI组件.下面是用vue2实现的一个组件：

<template>
  <div
    class="arrow"
    :style="getArrowStyle"
    :class="direction"
  />
</template>

<script>
export default {
  name: 'IconArrow',
  props: {
    width: {
      type: Number,
      default: 21,
    },
    height: {
      type: Number,
      default: 30,
    },
    borderColor: {
      type: String,
      default: '#FFFFFF',
    },
    borderWidth: {
      type: Number,
      default: 5,
    },
    // 箭头方向
    direction: {
      type: String,
      default: 'left'
    }
  },
  computed: {
    getSideLenght () {
      // 勾股定理计算箭头尺寸
      const num = ((this.width) ** 2 + (this.height / 2) ** 2) ** 0.5;
      return num;
    },
    getArrowStyle () {
      return `
        backgroundColor: ${this.bgColor};
        width: ${this.getSideLenght};
        height: ${this.getSideLenght};
        border: solid ${this.borderColor};
        borderWidth: 0 ${this.borderWidth} ${this.borderWidth} 0;
      `;
    }
  }
}
</script>

<style lang="scss" scoped>
.arrow {
  box-sizing: border-box;
  &.left {
    transform: rotate(135deg);
  }
  &.right {
    transform: rotate(-45deg);
  }
  &.top {
    transform: rotate(-135deg);
  }
  &.bottom {
    transform: rotate(45deg);
  }
}
</style>

3. 总结

本文介绍的方法实现的只是直角箭头。当然方案还有很多种，像svg、canvas等。有别的实现思路👏分享出来～

avatar
文章
阅读
粉丝