首页 > 其他分享 >css 理解了原理,绘制三角形就简单了

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

时间:2024-06-06 15:00:31浏览次数:31  
标签:solid 绘制 100px height width 三角形 border transparent css

 

1.border-位置

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

1.transparent

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

<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>

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

标签:solid,绘制,100px,height,width,三角形,border,transparent,css
From: https://blog.csdn.net/weixin_44565776/article/details/139496138

相关文章

  • 制作一个简单HTML静态网页(HTML+CSS) (2)
    ......
  • 一个简单的HTML网页 、个人主页网页设计(HTML+CSS) (2)
    ......
  • CSS
    css介绍用来对HTM进行装饰的注释语法:/**/语法结构:选择符书写位置直接写在style标签中<style>h1{color:red}</style>直接在标签中定义一个style属性<h1style='color:read'>***</h1>通过外部文件引入<linkrel='',href=''>......
  • web 关于CSS
    我主要将两个好理解的:1这个代码是直接写在html里的,这个是不安全的。还有这个是在<head>标签下的。<styletype="text/css">body{background-image:url('images/background2.jpeg');background-size:cover;line-height:2;}.center-text{text-align:......
  • 解锁用Mermaid绘制图表的神奇力量
    在这个快节奏、信息爆炸的时代,我们迫切需要一种简单、高效且美观的方式来表达复杂的思想和流程。幸运的是,Mermaid就是这样一种工具。无论你是开发者、项目经理还是设计师,Mermaid都能帮助你轻松绘制各种类型的图表,让你的文档和报告更加生动有趣。现在,让我们一起探索如何使......
  • 除visio以外的几款好用流程图绘制工具
            流程图绘制软件在嵌入式软件开发中扮演着重要的角色,它们能够帮助用户清晰、直观地展示工作流程。以下是几款流行的流程图绘制软件及其特点的详细报告:思维导图MindMasterMindMaster作为一款专业的思维导图软件,不仅具备强大的思维导图制作功能,同时也提供了丰......
  • CSS 头部固定,中间滑动
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width......
  • 裁剪的3种方式,CSS 如何隐藏移动端的滚动条?
    在移动端开发中,经常会碰到需要横向滚动的场景,例如这样的但很多时候是不需要展示这个滚动条的,也就是这样的效果,如下你可能想到直接设置滚动条样式就可以了,就像这样::-webkit-scrollbar{display:none;}目前来看好像没什么问题,但在某些版本的iOS上却无效(具体待测试),滚......
  • Css var 的基础使用
    Cssvar语法var(custom-property-name,value)-custom-property-name必须变量必须以--开头后面可以是英文、数字连接符,区分大小写-value不必须默认值当custom-property-name不存在时使用优先级style>id>class>tag>*>:root伪类:root相当于文档根元......
  • Python实例:仅绘制图例而不绘制实际的图形
    Python实例:仅绘制图例而不绘制实际的图形作者:凯鲁嘎吉-博客园 http://www.cnblogs.com/kailugaji/Python实例:仅绘制图例而不绘制实际的图形,使用线条来表示不同的数据系列(即使这些数据系列在图中没有实际表示)。#Python实例:仅绘制图例而不绘制实际的图形#使用线条来表示不......