CSS渐变

线性渐变

.baikuai {
  width: 200px;
  height: 200px;
  // background: -ms-linear-gradient(to top left, white, blue);
  // background: -webkit-linear-gradient(to top left, white, blue);
  // background: -moz-linear-gradient(to top left, white, blue);
  // background: linear-gradient(
  //   to top left,
  //   white,
  //   white,
  //   white,
  //   white,
  //   #fee4e5
  // ); /*渐变从左上角到右下角*/
  background: linear-gradient(-85deg, #3a342a 0%, #9b4a1b 40%, #3a342a 100%);//-85度开始渐变 
}

实现四边形一个角的渐变，效果如

代码：

<template>
  <view>
    <div class="a">
      <div class="b"></div>
    </div>
  </view>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  onLoad() {},
  methods: {},
};
</script>

<style lang='scss' scoped>
.a {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: aliceblue;
}
.b {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 300px;
  height: 100px;
  border-radius: 10px;
  background: linear-gradient(
    to top left,
    aliceblue,
    aliceblue,//此处的颜色需跟父元素的背景色一致
    aliceblue,
    #cf855d
  );
}
</style>