用纯css实现三角形

原创于 2022-05-24 12:50:08 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

本文介绍了如何使用纯CSS来创建一个三角形，通过设置边框颜色和宽度，巧妙地利用透明边框达到最终效果。示例代码中展示了具体的实现步骤，是前端开发者掌握CSS技巧的一个实用示例。

<template>
	<view>
		<view>
			用纯css实现三角形
			<view class="box"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.box{
		//设置宽高为0
		width: 0px;
		height: 0px;
		
		//设置border
		border: 100rpx solid;
		
		//设置边框上下左右颜色，需要的保留颜色，其他设置透明
		border-top-color: #aaaaff;
		border-right-color: #ff5500;
		border-bottom-color: transparent;
		border-left-color: transparent;
}
</style>