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

如何使用CSS画一个三角形

news 2026/2/7 13:35:08

原理：其实就是规定元素的四个边框颜色及边框宽度，将元素宽高设置为0。如果要哪个方向的三角形，将对应其他三个方向的边框宽和颜色设置为0和透明transparent即可

1.元素设置边框，宽高，背景色

<style>.border {width: 50px;height: 50px;border: 2px solid;border-color: #96ceb4 #ffeead #d9534f #ffad60;} </style><body><div class="border"></div>
</body>

元素 边框为2px的，四个方向颜色不同

2.将元素宽高设置为0，边框宽设置为50px

    .border {width:0;height: 0;
//注意solid也要设置border: 50px solid;border-color: #96ceb4 #ffeead #d9534f #ffad60;}

元素变为四个三角形组合

3. 设置上、左、右透明度为transparent且设置右和下的边框

    .border {width:0;height: 0;border-style: solid;/* border-width: 0 50px 50px 0; */border-width: 0 50px 50px;/* border-color: transparent transparent #d9534f transparent; */border-color: transparent transparent #d9534f;position: relative;}

只要修改对应两边边框和该方向上以外的透明度即可

相关文章：

如何使用CSS画一个三角形

原理&#xff1a;其实就是规定元素的四个边框颜色及边框宽度&#xff0c;将元素宽高设置为0。如果要哪个方向的三角形&#xff0c;将对应其他三个方向的边框宽和颜色设置为0和透明transparent即可 1.元素设置边框&#xff0c;宽高&#xff0c;背景色 <style>.border {w…...

编程日记 2023/9/8 20:15:05

第15章_锁: (表级锁、页级锁、行锁、悲观锁、乐观锁、全局锁、死锁)

3.2 从数据操作的粒度划分&#xff1a;表级锁、页级锁、行锁 为了提高数据库并发度&#xff0c;每次锁定的数据范围越小越好&#xff0c;理论上每次只锁定当前操作的数据的方案会得到最大的并发度&#xff0c;但管理锁是很耗资源&#xff08;涉及获取、检查、释放锁等动作)。因…...

编程日记 2023/9/8 20:14:05

python音频转文字调用baidu

python音频转文字调用的是百度智能云的接口&#xff0c;因业务需求会涉及比较多数字&#xff0c;所以这里做了数字的处理&#xff0c;可根据自己的需求修改。 from flask import Flask, request, jsonify import requestsfrom flask_limiter import Limiterapp Flask(__name_…...

编程日记 2023/9/8 20:13:04

靶场溯源第二题

关卡描述&#xff1a;1. 网站后台登陆地址是多少&#xff1f;&#xff08;相对路径&#xff09; 首先这种确定的网站访问的都是http或者https协议&#xff0c;搜索http看看。关于http的就这两个信息&#xff0c;然后172.16.60.199出现最多&#xff0c;先过滤这个ip看看 这个很…...

编程日记 2023/9/8 20:12:01

mysql 的增删改查以及模糊查询、字符集语句的使用

一、mysql启动与登陆(windows下的mysql操作) 1.启动mysql服务 net start mysql81 2.登陆mysql mysql -uroot -p 3.查看所有数据库 show databases; 二、模糊查询&#xff08;like&#xff09; 1. _代表查询单个 2.%代表查询多个 3.查找所有含有schema的数据库&#xff1b;…...

编程日记 2023/9/8 20:11:00

Python Django框架中文教程：学习简单、灵活、高效的Web应用程序框架

概述: Python Django是一种流行的Web应用程序框架&#xff0c;被广泛应用于开发高效、可扩展的网站和Web应用程序。Django以其简单、灵活和高效而受到开发者们的青睐。它提供了强大的工具和功能&#xff0c;使开发过程更加容易和高效。 Django的主要目标是帮助开发者快速构建…...

编程日记 2023/9/8 20:09:59

Docker认识即安装

Docker及相关概念 Docker和虚拟机方式的区别&#xff1a;虚拟机技术是虚拟出一套硬件后&#xff0c;在其上运行一个完整的操作系统&#xff0c;在该系统上在运行所需应用进程&#xff1b;而容器内的应用进程是直接运行于宿主的内核&#xff0c;容器内没有自己的内核&#xff0…...

编程日记 2023/9/8 20:08:58

chrome 谷歌浏览器 导出插件拓展和导入插件拓展

给同事部署 微软 RPA时&#xff0c;需要用到对应的chrome浏览器插件&#xff1b;谷歌浏览器没有外网是不能直接下载拓展弄了半小时后才弄好&#xff0c;竟发现没有现成的教程&#xff0c;遂补充&#xff1b; 如何打包导出 谷歌浏览器 地址栏敲 chrome://extensions/在对应的地…...

编程日记 2023/9/8 20:07:54

fastjson漏洞批量检测工具

JsonExp 简介 版本&#xff1a;1.3.5 1. 根据现有payload&#xff0c;检测目标是否存在fastjson或jackson漏洞&#xff08;工具仅用于检测漏洞&#xff09;2. 若存在漏洞&#xff0c;可根据对应payload进行后渗透利用3. 若出现新的漏洞时&#xff0c;可将最新的payload新增至…...

编程日记 2023/9/8 20:06:53

Vue进阶（六十七）页面刷新路由传参丢失问题分析及解决

文章目录 一、前言二、问题排查三、延伸阅读3.1 Apache服务器access_log日志3.2 浏览器的常见User Agent 各字段的解释 一、前言 问题描述&#xff1a;Vue项目上线后&#xff0c;在IE浏览器上&#xff0c;从A页面跳转至B页面&#xff0c;B页面通过data中接收来自A页面的参数信…...

编程日记 2023/9/8 20:05:52

阿里云ubuntu服务器搭建ftp服务器

阿里云ubuntu服务器搭建ftp服务器 服务器环境安装步骤一.创建用户二.安装 vsftp三 配置vsftp四.配置阿里云安全组 服务器环境 阿里云上的云服务器&#xff0c;操作系统为 ubuntu20.04。 安装步骤 一.创建用户 为什么需要创建用户&#xff1f; 这里的用户&#xff0c;指的是…...

编程日记 2023/9/8 20:04:51

03 卷积操作图片

一、均值滤波 # 卷积操作 # 输入图片. input, 必须是4维tensor(图片数量, 图片高度, 图片的宽度, 图片的通道数) # filters, 卷积核, 必须是4维的tensor(卷积核的高度和宽度, 输入图片的通道数, 卷积核的个数) # strides, 步长, 卷积核在图片的各个维度上的移动步长, (1, 1, 1,…...

编程日记 2023/9/8 20:03:49

软考：中级软件设计师:程序语言基础：表达式，标准分类，法律法规，程序语言特点，函数传值传址

软考&#xff1a;中级软件设计师:程序语言基础&#xff1a;表达式 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都…...

编程日记 2023/9/8 20:02:49

Java“牵手”1688商品详情数据，1688商品详情API接口，1688API接口申请指南

1688平台商品详情接口是开放平台提供的一种API接口&#xff0c;通过调用API接口&#xff0c;开发者可以获取1688商品的标题、价格、库存、月销量、总销量、库存、详情描述、图片等详细信息 。 获取商品详情接口API是一种用于获取电商平台上商品详情数据的接口&#xff0c;通过…...

编程日记 2023/9/8 20:01:48

stable diffusion实践操作-批次出图

系列文章目录 stable diffusion实践操作 文章目录 系列文章目录前言一、批次出图介绍1.1 webUI设置1.2 参数介绍 二、批次出图使用2.1 如何设置2.1 效果展示 总结 前言 本章主要介绍SD批次出图。 想要一次产生多张图片的时候使用。 一、批次出图介绍 1.1 webUI设置 1.2 参数…...

编程日记 2023/9/8 20:00:47

LeetCode热题100 【cpp】题解（一）哈希表和双指针

文章目录 1. 两数之和49. 字母异位词分组128. 最长连续序列283. 移动零11. 盛最多水的容器15. 三数之和42. 接雨水 题单链接&#xff1a; LeetCode 热题 100 1. 两数之和 leetcode题目链接 题解1&#xff1a;暴力枚举 时间复杂度&#xff1a; O ( n 2 ) O(n^2) O(n2) class …...

编程日记 2023/9/8 19:59:44

Python爬虫常见代理池实现和优化

在这篇文章中&#xff0c;我们将探讨Python爬虫中常见的代理池实现和优化方法。在爬取网站数据时&#xff0c;为防止被目标网站封禁IP&#xff0c;我们通常会使用代理IP进行访问。一个高效且稳定的代理池可以帮助我们轻松应对各种反爬策略。 　　首先&#xff0c;我们来了解一下…...

编程日记 2023/9/8 19:58:43

前端面试的话术集锦第 3 篇：进阶篇上

这是记录前端面试的话术集锦第三篇博文——进阶篇上，我会不断更新前端面试话术的博文。❗❗❗ 1 谈谈变量提升 当执⾏JS代码时，会⽣成执⾏环境，只要代码不是写在函数中的，就是在全局执⾏环境中，函数中的代码会产⽣函数执⾏环境，只此两种执⾏环境。 b() // call b conso…...

编程日记 2023/9/8 19:57:41

【文字到语音的论文总结】

1.文字到语音的整个过程 文字到语音的一般整体结构 主要是下面这个流程&#xff0c;每个网络可能会把其中两者或是三者融合在一起来&#xff1b; 长度不同的问题 生成的语音可能和文字的长度并不一样&#xff0c;因此需要解决这个问题 Tactron使用的是交叉注意力的方式解…...

编程日记 2023/9/8 19:56:40

E. Data Structures Fan(思维 + 异或前缀和)

Problem - E - Codeforces 给你一个整数数组 a1, a2,..., an&#xff0c;以及一个由 n 个字符组成的二进制字符串† s。 Augustin 是一个数据结构的爱好者。因此&#xff0c;他请你实现一个可以回答 q 个查询的数据结构。这里有两种类型的查询&#xff1a; Plain Text "1…...

编程日记 2023/9/8 19:55:39

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/12/6 22:50:48

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/29 17:56:19

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

编程新知 2026/1/25 10:01:01

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2026/1/31 17:02:38

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

编程新知 2026/2/6 10:22:29

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

编程新知 2025/9/13 16:14:04

【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...

编程新知 2026/1/31 9:00:14