纯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>
效果:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/60aaee77e952ff274385d3081b0f658c.png#pic_center)
若对您有帮助,请点击跳转到B站一键三连哦!感谢支持!