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

如何使用CSS画一个三角形

news 2026/3/30 11:35:21

原理：其实就是规定元素的四个边框颜色及边框宽度，将元素宽高设置为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

拆解Lite-HRNet的‘轻量’魔法：ShuffleBlock与CCWBlock如何省下80%算力

拆解Lite-HRNet的‘轻量’魔法&#xff1a;ShuffleBlock与CCWBlock如何省下80%算力 在计算机视觉领域&#xff0c;高分辨率网络&#xff08;HRNet&#xff09;因其出色的特征保持能力而备受推崇&#xff0c;但随之而来的计算成本却让许多实际应用望而却步。Lite-HRNet的出现&a…...

编程新知 2026/3/30 10:40:20

三步打造清爽Mac菜单栏：Dozer终极隐藏方案

三步打造清爽Mac菜单栏&#xff1a;Dozer终极隐藏方案 【免费下载链接】Dozer Hide menu bar icons on macOS 项目地址: https://gitcode.com/gh_mirrors/do/Dozer 还在为Mac菜单栏上拥挤不堪的图标感到困扰吗&#xff1f;想要一个简洁高效的工作界面&#xff1f;Dozer正…...

编程新知 2026/3/30 10:40:20

评一个典型的“数学可视化 + 计算机图形学入门”的优秀案例(C++精灵库3D案例)

这份代码和视频展示了一个非常典型的“数学可视化 计算机图形学入门”的优秀案例。它不仅仅是一段能运行的代码&#xff0c;更是一个将抽象数学公式转化为直观视觉艺术的教学演示。 以下是对该程序及视频的多维度评论&#xff1a; 1. 技术实现与图形学原理 这段代码虽然简短…...

编程新知 2026/3/30 9:29:51

MinerU 2.5-1.2B新手教程：无需深度学习基础，快速上手PDF提取

MinerU 2.5-1.2B新手教程&#xff1a;无需深度学习基础&#xff0c;快速上手PDF提取 1. 引言&#xff1a;为什么选择MinerU&#xff1f; PDF文档是我们日常工作和学习中常见的文件格式&#xff0c;但要从PDF中提取内容却常常让人头疼。特别是遇到学术论文、技术报告这类包含复…...

编程新知 2026/3/30 9:21:50

lychee-rerank-mm与LangChain整合：构建智能文档检索系统

lychee-rerank-mm与LangChain整合&#xff1a;构建智能文档检索系统 1. 引言 想象一下这样的场景&#xff1a;你在一家律师事务所工作&#xff0c;每天需要从成千上万份法律文书中快速找到与当前案件相关的资料。传统的全文搜索只能帮你找到包含关键词的文档&#xff0c;但无…...

编程新知 2026/3/30 9:15:45

Artichoke 快速入门：5分钟学会安装和使用这个革命性 Ruby 实现

Artichoke 快速入门&#xff1a;5分钟学会安装和使用这个革命性 Ruby 实现 【免费下载链接】artichoke &#x1f48e; Artichoke is a Ruby made with Rust 项目地址: https://gitcode.com/gh_mirrors/ar/artichoke Artichoke 是一个用 Rust 和 Ruby 编写的革命性 Ruby …...

编程新知 2026/3/30 8:53:34

小白也能玩转AI绘画：LiuJuan20260223Zimage快速上手指南

小白也能玩转AI绘画&#xff1a;LiuJuan20260223Zimage快速上手指南 你是不是也刷到过那些用AI生成的、细节超棒的人像图片&#xff0c;心里痒痒的&#xff0c;但又觉得那些工具太复杂&#xff0c;光是安装部署就劝退了&#xff1f;别担心&#xff0c;今天要介绍的这个工具&am…...

编程新知 2026/3/30 8:47:30

不只是图表：用Three.js和Vue3打造一个可交互的3D热力图组件库（附完整源码）

不只是图表&#xff1a;用Three.js和Vue3打造一个可交互的3D热力图组件库 在数据可视化领域&#xff0c;3D热力图正逐渐成为展示高密度空间数据的首选方案。传统2D热力图虽然直观&#xff0c;但在表现复杂数据关系时往往力不从心。本文将带您从零开始构建一个生产级Vue3Three.j…...

编程新知 2026/3/30 6:54:55

gorilla/sessions深度解析：Cookie与文件系统存储实战

gorilla/sessions深度解析&#xff1a;Cookie与文件系统存储实战 【免费下载链接】sessions Package gorilla/sessions provides cookie and filesystem sessions and infrastructure for custom session backends. 项目地址: https://gitcode.com/gh_mirrors/se/sessions …...

编程新知 2026/3/30 4:31:46

手把手教你用ChatGPT-Next-Web（NextChat）免费搭建个人AI助手网站（附Docker部署）

零代码实战&#xff1a;用ChatGPT-Next-Web快速搭建专属AI对话平台 在AI技术平民化的浪潮中&#xff0c;拥有一个私人定制的智能对话平台不再是大公司的专利。ChatGPT-Next-Web&#xff08;原名NextChat&#xff09;作为GitHub上最受欢迎的AI界面开源项目之一&#xff0c;让普…...

编程新知 2026/3/30 4:09:23