CSS实现三角形
CSS实现三角形
- 前言
- 第一种:border+transparent
- 第二种border+rgb
- 使用unicode字符
前言
本文讲解三种实现三角形的方式，并且配有图文以及代码解说。那么好，本文正式开始。
第一种:border+transparent
border是边框，而transparent是透明的颜色，下图为它俩结合实现的三角形样式。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>三角形</title><style>* {margin: 0;padding: 0;}body {min-height: 100vh;background: linear-gradient(-135deg, #4230cc, #00aaff)}.demo {margin: 10px;float: left;width: 0;height: 0;border-left: 50px solid gray;border-top: 50px solid black;border-bottom: 50px solid lightblue;border-right: 50px solid lightgray;}.demo1 {margin: 10px;float: left;width: 0;height: 0;border-left: 50px solid gray;border-right: 50px solid transparent;border-top: 50px solid transparent;border-bottom: 50px solid gray;}.demo2 {margin: 10px;float: left;width: 0;height: 0;border-left: 50px solid transparent;border-top: 50px solid transparent;border-bottom: 50px solid lightblue;border-right: 50px solid lightblue;}.demo3 {margin: 10px;float: left;width: 0;height: 0;border-left: 50px solid lightgray;border-top: 50px solid lightgray;border-bottom: 50px solid transparent;border-right: 50px solid transparent;}.demo4 {margin: 10px;float: left;width: 0;height: 0;border-left: 50px solid transparent;border-top: 50px solid black;border-bottom: 50px solid transparent;border-right: 50px solid black;}</style></head><body><div><div class="demo"></div><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div><div class="demo4"></div></div></body>
</html>
在上述代码中，主要是利用borderCSS样式以及transparent透明度来实现三角形调用，再class为demo的div中，我们分别给上下左右边框赋不同的颜色且相同的大小时我们会发现，我们有四个不同方向的三角形，那么我们就可以给其他任意两个方向的边框设置成透明，然后再给两个方向设置成相同颜色可以得到一个直角三角形，或者只给一个方向设置颜色也可以得到一个等腰三角形。
第二种border+rgb
<!DOCTYPE html>
<html>
<head><style>.rgb {width:0;height:0;border-top:50px solid gray;border-right:50px solid rgb(0, 0, 0,0);border-left:50px solid rgb(0,0,0,0);border-bottom:50px solid red;}</style>
</head>
<body><div class="rgb"></div></body>
</html>
border+rgb属性也可以实现三角形效果,实现原因是rgb的第四个属性为透明度，和transparent透明颜色有异曲同工之妙，所以再某种程度上transparent=rgb第四个属性为0，所以border+rgb也可以实现相同的三角形效果。
使用unicode字符
unicode字符也可以实现三角形，不过不能改变它的方向，▲
<!DOCTYPE html>
<html>
<head><style>.str {font-size:100px;}</style>
</head>
<body><div class="str">▲</div>
</body>
</html>
这个也可以实现三角形效果，可以通过调用font-size长度来对这个三角形字符大小进行调整。
相关文章：
CSS实现三角形
CSS实现三角形 前言第一种:bordertransparent第二种borderrgb使用unicode字符 前言 本文讲解三种实现三角形的方式，并且配有图文以及代码解说。那么好，本文正式开始。 第一种:bordertransparent border是边框，而transparent是透明的颜色&a…...
mysql 与 Oracle 的区别,oracle 与 mysql分页查询的区别
文章目录 mysql 与 Oracle 的区别1、并发性2、一致性3、事务4、数据持久性5、提交方式6、逻辑备份7、热备份8、sql语句的扩展和灵活性9、复制10、性能诊断11、权限与安全12、分区表和分区索引13、管理工具 oracle 与 mysql分页查询1.Oracle分页查询中提供了一个伪列：…...
原生实现底部弹窗效果 h5 小程序
<template><div class"home"><div class"btn" click"showPopupshow">弹出底部蒙层</div><div class"popup " catchtouchmove"true" :class"showPopup" ><div class"mask&q…...
最新Midjourney绘画提示词Prompt教程无需魔法
最新Midjourney绘画提示词Prompt教程无需魔法使用 一、AI绘画工具 SparkAi【无需魔法使用】： SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT？小编这里写一个详细图文教程吧！本系统使用NestjsVueTypes…...
大一统模型 Universal Instance Perception as Object Discovery and Retrieval 论文阅读笔记
Universal Instance Perception as Object Discovery and Retrieval 论文阅读笔记 一、Abstract二、引言三、相关工作实例感知通过类别名进行检索通过语言表达式的检索通过指代标注的检索 统一的视觉模型Unified Learning ParadigmsUnified Model Architectures 四、方法4.1 Pr…...
java springboot测试类虚拟MVC环境 匹配返回值与预期内容是否相同 (JSON数据格式) 版
上文java springboot测试类鉴定虚拟MVC请求 返回内容与预期值是否相同我们讲了测试类中 虚拟MVC发送请求 匹配返回内容是否与预期值相同 但是 让我意外的是 既然没人骂我 因为我们实际开发 返回的基本都是json数据 字符串的接口场景是少数的 我们在java文件目录下创建一个 dom…...
react等效memo的方法
视频教程 前端技术｜Dan博客｜在你写memo()之前_哔哩哔哩_bilibili 把与ExpensiveTree的无关的dom做成一个组件 第二种情况，color在ExpensiveTree组件的父级dom 创建一个组件，将state的color和input写上，而ExpensiveTr…...
2023年亚太杯数学建模A题解题思路（*基于OpenCV的复杂背景下苹果目标的识别定位方法研究）
摘要 由于要求较高的时效性和劳力投入，果实采摘环节成为苹果生产作业中十分重要的一部分。而对于自然环境下生长的苹果，光照影响、枝叶遮挡和果实重叠等情况普遍存在，这严重影响了果实的准确识别以及采摘点的精确定位。针对在复杂背景下苹果的…...
【机器学习】聚类（三）：原型聚类：高斯混合聚类
文章目录 一、实验介绍1. 算法流程2. 算法解释3. 算法特点4. 应用场景5. 注意事项 二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入必要的库1. 全局调试变量2. 调试函数3. 高斯密度函数（phi）4. E步（getExpectation）…...
线上ES集群参数配置引起的业务异常案例分析
本文介绍了一次排查Elasticsearch node_concurrent_recoveries 引发的性能问题的过程。 一、故障描述 1.1 故障现象 1. 业务反馈 业务部分读请求抛出请求超时的错误。 2. 故障定位信息获取 故障开始时间 19:30左右开始 故障抛出异常日志 错误日志抛出timeout错误。 故障之前…...
【Docker】Docker 仓库管理和Docker Dockerfile
作者简介： 辭七七，目前大二，正在学习C/C，Java，Python等 作者主页： 七七的个人主页 文章收录专栏： 七七的闲谈 欢迎大家点赞 👍 收藏 ⭐ 加关注哦！💖…...
面试必问：如何快速定位BUG？BUG定位技巧及N板斧！
01 定位问题的重要性 很多测试人员可能会说，我的职责就是找到bug，至于找原因并修复，那是开发的事情，关我什么事？ 好，我的回答是，如果您只想做一个测试人员最基本最本分的事情，那么可…...
力扣114. 二叉树展开为链表（java，用树模拟链表）
Problem: 114. 二叉树展开为链表 文章目录 题目描述思路解题方法复杂度Code 题目描述 给你二叉树的根结点 root ，请你将它展开为一个单链表： 1.展开后的单链表应该同样使用 TreeNode ，其中 right 子指针指向链表中下一个结点，而左…...
学生成绩管理系统（python实现）
学生成绩表信息包括学号、姓名、各科课程成绩（语文、数学、英语、政治）和总分。用带头结点的单链表管理学生成绩表，每个学生的信息依次从键盘输入，并根据需要进行插入、删除、排序、输出等操作。 import json# 初始化系统 studen…...
【Leetcode合集】1410. HTML 实体解析器
1410. HTML 实体解析器 1410. HTML 实体解析器 代码仓库地址： https://github.com/slience-me/Leetcode 个人博客 ：https://slienceme.xyz 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀，返回空字符串 ""…...
04-React脚手架 集成Axios
初始化React脚手架 前期准备 1.脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 1.包含了所有需要的配置（语法检查、jsx编译、devServer…）2.下载好了所有相关的依赖3.可以直接运行一个简单效果 2.react提供了一个用于创建react项目的脚手架库…...
时序预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost时间序列预测
时序预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost时间序列预测 目录 时序预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.Matlab实现BiLSTM-Adaboost…...
【nlp】3.6 Tansformer模型构建（编码器与解码器模块耦合）
Tansformer模型构建（编码器与解码器模块耦合） 1. 模型构建介绍2 编码器-解码器结构的代码实现3 Tansformer模型构建过程的代码实现4 小结1. 模型构建介绍 通过上面的小节, 我们已经完成了所有组成部分的实现, 接下来就来实现完整的编码器-解码器结构耦合. Transformer总体架…...
【【Linux系统下常用指令学习 之 二 】】
Linux系统下常用指令学习 之 二 文件查询和搜索 文件的查询和搜索也是最常用的操作，在嵌入式 Linux 开发中常常需要在 Linux 源码文件中查询某个文件是否存在，或者搜索哪些文件都调用了某个函数等等。 1、命令 find find 命令用于在目录结构中查找文件…...
Git-将指定文件回退到指定版本
场景1：修改了文件/path/to/file，没有提交，但是觉得改的不好，想还原。 解决： git checkout -- /path/to/file 场景2：修改了文件/path/to/file，已经提交，但是觉得改的不好，…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO：支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题：MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者：Yanyuan Chen, Dexuan Xu, Yu Hu…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
智能在线客服平台：数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下，卢森堡罗伯特舒曼医院（the Robert Schuman Hospitals, HRS）凭借在无菌制剂生产流程中引入增强现实技术（AR）创新项目，荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库（uthash库）提供对哈希表的操作，文章如下： C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...
保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！
目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...
Python训练营-Day26-函数专题1：函数定义与参数
题目1：计算圆的面积 任务： 编写一个名为 calculate_circle_area 的函数，该函数接收圆的半径 radius 作为参数，并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求：函数接收一个位置参数 radi…...
AxureRP-Pro-Beta-Setup_114413.exe （6.0.0.2887）
Name：3ddown Serial：FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名：Axure 序列号：8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...