css 理解了原理,绘制三角形就简单了

1.border-位置

注意:border-bottom/up/right/left 主要是以三角形的结构搭建而成,而border也是如此。而且从边框的外围开始计算像素尺寸。在理解了这一点之后,绘制三角形就简单多了。

1.transparent

注意:该属性主要是颜色透明。

javascript 复制代码
<template>
	<main style="width:500px;border:1px solid;margin: 0 auto;">
		
		<div style="margin: 0 auto;width: 200px;">
			<div class="up"></div>
			<div class="down"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</main>
</template>
<script setup>
//transparent 颜色透明
</script>

<style  lang="less" scoped>
	.up{
		width: 0;
		height: 0;
		border: 100px solid;
		border-top: 100px solid red;
	}

	.down{
		width: 0;
		height: 0;
		border: 100px solid transparent;
		border-bottom: 100px solid yellow;
	}

	.left{
		width: 0;
		height: 0;
		border: 100px solid transparent;
		border-left: 100px solid blue;
	}

	.right{
		width: 0;
		height: 0;
		border: 100px solid transparent;
		border-top: 100px solid green;
	}
</style>

嗨,我是小路。如果喜欢这篇文章,记得【点赞】+【关注】+【收藏】。

相关推荐
拾光拾趣录3 分钟前
虚拟DOM
前端·vue.js·dom
爱学习的茄子3 分钟前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神5 分钟前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
摆烂为不摆烂8 分钟前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神9 分钟前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵9 分钟前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
202610 分钟前
11. vite打包优化
前端·javascript·vite
拾光拾趣录15 分钟前
组件封装的⼀些基本准则
前端·前端工程化
CAD老兵16 分钟前
TypeScript 中如何转换两个具有相同值的枚举类型?
前端
1024小神20 分钟前
Cocos游戏开发中,检测两个物体碰撞,并实现物理反弹逻辑
前端·javascript