纯css实现三角形

点击打开视频教程

<template>
  <div id="app">
    <!-- 纯css实现三角形书写 -->
    <div class="test-border"></div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      
    } 
  },
  mounted(){
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
  /* .test-border {
    width: 0;
    height: 0;
    text-align: center;
    border-top: 50px solid transparent;
    border-bottom: 50px solid #00a000;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
  } */
  .test-border {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 50px solid #436eee;
    text-align: center;
  }
</style>

效果：

屏幕截图 2022-08-08 203946.png