css 实用技巧 —— 使用border属性绘图（三角形、梯形、对话框尖角）

<template>
    <div style="padding: 20px">
        <div class="triangle"></div>
    </div>
</template>
<style scoped>
    .triangle {
        width: 0;
        border: 10px solid;
        border-color: #f30 transparent transparent;
    }
</style>

<template>
    <div style="padding: 20px">
        <div class="trapezoid"></div>
    </div>
</template>
<style scoped>
    .trapezoid {
        width: 10px;
        height: 10px;
        border: 10px solid;
        border-color: #f30 transparent transparent;
    }
</style>

<template>
    <div style="padding: 20px">
        <div class="trapezoid"></div>
    </div>
</template>
<style scoped>
    .trapezoid {
        width: 0px;
        border-width: 10px 4px;
        border-style: solid;
        border-color: #f30 #f30 transparent transparent;
    }
</style>