计算机能力挑战赛java 2019真题解析

最近有个模块需求采用斜条纹背景 做标头背景 记录下实现代码

<template>
  <div class="striped-background">
    <span>货种</span>
    <span>企业数</span>
    <span>企业数</span>
    <span>客户数</span>
  </div>
</template>
<script>
export default {
  name:'testDemo'
}
</script>
<style scoped>
.striped-background {
  background: repeating-linear-gradient(
      135deg,
      #0b4ba1,
      #0b4ba1 10px,
      #0d57b0 10px,
      #0d57b0 20px
  );
  color: #00faff;
  font-size: 16px;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
</style>

代码渲染效果