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>

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

相关推荐
小刘鸭地下城几秒前
Web安全必备:关键 HTTP 标头解析
前端
yddddddy1 分钟前
html基本知识
前端·html
荣达1 小时前
koa洋葱模型理解
前端·后端·node.js
小刘鸭地下城1 小时前
网页深色模式完整实现:从响应式设计到系统主题联动
css
reembarkation1 小时前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
KenXu1 小时前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|2 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青2 小时前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥2 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb2 小时前
【Python】字符串
java·前端·python