当前位置： 首页 > news >正文

CSS实现三角形

news 2026/2/1 17:16:04

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字符也可以实现三角形，不过不能改变它的方向，&#9650

<!DOCTYPE html>
<html>
<head><style>.str {font-size:100px;}</style>
</head>
<body><div class="str">&#9650</div>
</body>
</html>

这个也可以实现三角形效果，可以通过调用font-size长度来对这个三角形字符大小进行调整。
在这里插入图片描述

相关文章：

CSS实现三角形

CSS实现三角形 前言第一种:bordertransparent第二种borderrgb使用unicode字符 前言 本文讲解三种实现三角形的方式&#xff0c;并且配有图文以及代码解说。那么好&#xff0c;本文正式开始。 第一种:bordertransparent border是边框&#xff0c;而transparent是透明的颜色&a…...

编程日记 2023/11/25 20:42:05

mysql 与 Oracle 的区别,oracle 与 mysql分页查询的区别

文章目录 mysql 与 Oracle 的区别1、并发性2、一致性3、事务4、数据持久性5、提交方式6、逻辑备份7、热备份8、sql语句的扩展和灵活性9、复制10、性能诊断11、权限与安全12、分区表和分区索引13、管理工具 oracle 与 mysql分页查询1.Oracle分页查询中提供了一个伪列&#xff1a…...

编程日记 2023/11/25 20:39:01

原生实现底部弹窗效果 h5 小程序

<template><div class"home"><div class"btn" click"showPopupshow">弹出底部蒙层</div><div class"popup " catchtouchmove"true" :class"showPopup" ><div class"mask&q…...

编程日记 2023/11/25 20:37:59

最新Midjourney绘画提示词Prompt教程无需魔法

最新Midjourney绘画提示词Prompt教程无需魔法使用 一、AI绘画工具 SparkAi【无需魔法使用】&#xff1a; SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&#xff01;本系统使用NestjsVueTypes…...

编程日记 2023/11/25 20:36:58

大一统模型 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…...

编程日记 2023/11/25 20:35:57

java springboot测试类虚拟MVC环境 匹配返回值与预期内容是否相同 (JSON数据格式) 版

上文java springboot测试类鉴定虚拟MVC请求 返回内容与预期值是否相同我们讲了测试类中 虚拟MVC发送请求 匹配返回内容是否与预期值相同 但是 让我意外的是 既然没人骂我 因为我们实际开发 返回的基本都是json数据 字符串的接口场景是少数的 我们在java文件目录下创建一个 dom…...

编程日记 2023/11/25 20:34:56

react等效memo的方法

视频教程 前端技术&#xff5c;Dan博客&#xff5c;在你写memo()之前_哔哩哔哩_bilibili 把与ExpensiveTree的无关的dom做成一个组件 第二种情况&#xff0c;color在ExpensiveTree组件的父级dom 创建一个组件&#xff0c;将state的color和input写上&#xff0c;而ExpensiveTr…...

编程日记 2023/11/25 20:33:55

2023年亚太杯数学建模A题解题思路（*基于OpenCV的复杂背景下苹果目标的识别定位方法研究）

摘要 由于要求较高的时效性和劳力投入&#xff0c;果实采摘环节成为苹果生产作业中十分重要的一部分。而对于自然环境下生长的苹果&#xff0c;光照影响、枝叶遮挡和果实重叠等情况普遍存在&#xff0c;这严重影响了果实的准确识别以及采摘点的精确定位。针对在复杂背景下苹果的…...

编程日记 2023/11/25 20:32:54

【机器学习】聚类（三）：原型聚类：高斯混合聚类

文章目录 一、实验介绍1. 算法流程2. 算法解释3. 算法特点4. 应用场景5. 注意事项 二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入必要的库1. 全局调试变量2. 调试函数3. 高斯密度函数&#xff08;phi&#xff09;4. E步&#xff08;getExpectation&#xff09…...

编程日记 2023/11/25 20:31:53

线上ES集群参数配置引起的业务异常案例分析

本文介绍了一次排查Elasticsearch node_concurrent_recoveries 引发的性能问题的过程。 一、故障描述 1.1 故障现象 1. 业务反馈 业务部分读请求抛出请求超时的错误。 2. 故障定位信息获取 故障开始时间 19:30左右开始 故障抛出异常日志 错误日志抛出timeout错误。 故障之前…...

编程日记 2023/11/25 20:30:51

【Docker】Docker 仓库管理和Docker Dockerfile

作者简介&#xff1a; 辭七七&#xff0c;目前大二&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…...

编程日记 2023/11/25 20:28:49

面试必问：如何快速定位BUG？BUG定位技巧及N板斧！

01 定位问题的重要性 很多测试人员可能会说&#xff0c;我的职责就是找到bug&#xff0c;至于找原因并修复&#xff0c;那是开发的事情&#xff0c;关我什么事&#xff1f; 好&#xff0c;我的回答是&#xff0c;如果您只想做一个测试人员最基本最本分的事情&#xff0c;那么可…...

编程日记 2023/11/25 20:27:48

力扣114. 二叉树展开为链表（java，用树模拟链表）

Problem: 114. 二叉树展开为链表 文章目录 题目描述思路解题方法复杂度Code 题目描述 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 1.展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左…...

编程日记 2023/11/25 20:26:47

学生成绩管理系统（python实现）

学生成绩表信息包括学号、姓名、各科课程成绩&#xff08;语文、数学、英语、政治&#xff09;和总分。用带头结点的单链表管理学生成绩表&#xff0c;每个学生的信息依次从键盘输入&#xff0c;并根据需要进行插入、删除、排序、输出等操作。 import json# 初始化系统 studen…...

编程日记 2023/11/25 20:25:46

【Leetcode合集】1410. HTML 实体解析器

1410. HTML 实体解析器 1410. HTML 实体解析器 代码仓库地址&#xff1a; https://github.com/slience-me/Leetcode 个人博客 &#xff1a;https://slienceme.xyz 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 ""…...

编程日记 2023/11/25 20:24:45

04-React脚手架 集成Axios

初始化React脚手架 前期准备 1.脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 1.包含了所有需要的配置&#xff08;语法检查、jsx编译、devServer…&#xff09;2.下载好了所有相关的依赖3.可以直接运行一个简单效果 2.react提供了一个用于创建react项目的脚手架库…...

编程日记 2023/11/25 20:23:45

时序预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost时间序列预测

时序预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost时间序列预测 目录 时序预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.Matlab实现BiLSTM-Adaboost…...

编程日记 2023/11/25 20:22:44

【nlp】3.6 Tansformer模型构建（编码器与解码器模块耦合）

Tansformer模型构建（编码器与解码器模块耦合） 1. 模型构建介绍2 编码器-解码器结构的代码实现3 Tansformer模型构建过程的代码实现4 小结1. 模型构建介绍 通过上面的小节, 我们已经完成了所有组成部分的实现, 接下来就来实现完整的编码器-解码器结构耦合. Transformer总体架…...

编程日记 2023/11/25 20:21:43

【【Linux系统下常用指令学习 之 二 】】

Linux系统下常用指令学习 之 二 文件查询和搜索 文件的查询和搜索也是最常用的操作&#xff0c;在嵌入式 Linux 开发中常常需要在 Linux 源码文件中查询某个文件是否存在&#xff0c;或者搜索哪些文件都调用了某个函数等等。 1、命令 find find 命令用于在目录结构中查找文件…...

编程日记 2023/11/25 20:20:41

Git-将指定文件回退到指定版本

场景1&#xff1a;修改了文件/path/to/file&#xff0c;没有提交&#xff0c;但是觉得改的不好&#xff0c;想还原。 解决&#xff1a; git checkout -- /path/to/file 场景2&#xff1a;修改了文件/path/to/file&#xff0c;已经提交&#xff0c;但是觉得改的不好&#xff0c…...

编程日记 2023/11/25 20:18:39

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2026/1/29 18:19:59

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2026/1/22 14:22:27

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2026/1/28 21:15:38

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2026/1/24 6:44:11

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2026/1/30 4:52:56

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2026/2/1 2:49:30

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2026/1/24 12:01:38

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11