micro_vue/src/scrm_pages/article/commentList.vue

<template>
    <div class="main-contain">
        <div class="position">
          <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div class="app-container">
          <div class="parent">
                 <span class="text"></span>  
                 <div class="triangle-topleft">
                   
                 </div>
                <div class="title">
                  已使用
                </div>
                 <img src="/static/images/a.jpg" style="width:100%;height:100%">
          </div>           
        </div>
    </div>
</template>

<script>
  import BreadCrumb from '../components/bread-crumb'
  export default {
    name: 'commentList',
    components:{
      BreadCrumb
    },
    data(){
      return{
        crumbs: [
          { path: false, name: '文章管理' },
          { path: '/articles/commentList', name: '评论列表' }
        ],
      }
    },
    methods:{
    }
  }
</script>

<style scoped>
    .parent{
        position: relative;
        width: 200px;
        height: 200px;
        background: yellow;
        font-size: 6px;
    }
    .parent .text{
        display: inline-block;
        transform: rotate(-45deg);
        padding: 20px;
        color: #fff;
        position: relative;
    }
   .triangle-topleft{
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
        position: relative;
        margin-top: -42px;
        top: 0px;
        z-index: 0;   
    }
    .title{
       transform: rotate(-45deg);
       position: relative;
       margin-top: -115px;
       margin-left: -8px;
    }
</style>