一,实现思路
html+css:
一个div盒子,盒子宽度和高度设置为0,然后给盒子设定border边框线,赋予不同的颜 色。
<template>
<div class="container">
</div>
</template>
<style scoped>
* {
box-sizing: border-box;
outline: none;
}
.container{
width: 0;
height: 0;
background-color: red;
position: absolute;
left: 45%;
top: 30%;
border-bottom: 100px solid red;
border-top: 100px solid yellow;
border-left: 100px solid deepskyblue;
border-right: 100px solid blueviolet;
}
</style>
二,实现各种三角形
思路就是给不同的边线赋予不同的颜色
html+css:
<template>
<div class="container">
</div>
</template>
* {
box-sizing: border-box;
outline: none;
}
.container{
width: 0;
height: 0;
position: absolute;
left: 45%;
top: 30%;
border-bottom: 100px solid transparent;
border-top: 100px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid blueviolet;
}