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>

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

相关推荐
海底火旺2 分钟前
useState:批处理与函数式更新
前端·react.js·面试
亿万托福4 分钟前
数字世界的构筑之艺:前端技术栈的浅描与远瞻
前端
用户40812812003814 分钟前
JWT 和 token 区别
前端
盏茶作酒295 分钟前
打造自己的组件库(三)打包及发布
前端·vue.js
单休好_好就好在比双休少一天6 分钟前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript
yinke小琪6 分钟前
JavaScript DOM内容操作常用方法和XSS注入攻击
前端·javascript
归于尽6 分钟前
从 TodoList 看自定义 Hook 的设计思想
前端
G等你下课6 分钟前
如何优雅地组织业务逻辑?自定义 Hook 全解析
前端·react.js
刘坤157 分钟前
封装axios二方包
前端·http
饮茶三千8 分钟前
几个在开发中起大作用的CSS新特性!
前端·css