美文网首页CSS 世界
【面试题】纯css实现三角形,你知道如何实现吗?

【面试题】纯css实现三角形,你知道如何实现吗?

作者: 前端末晨曦吖 | 来源:发表于2022-08-08 22:19 被阅读0次

纯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

相关文章

网友评论

    本文标题:【面试题】纯css实现三角形,你知道如何实现吗?

    本文链接:https://www.haomeiwen.com/subject/jgdgwrtx.html