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

【CSS】画个三角形或圆形或环

news 文章来源：https://blog.csdn.net/David_Hzy/article/details/132911183 2025/1/25 4:38:42

首先通过调整边框，我们可以发现一些端倪 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>.box{width: 150px;height:150px;border: 50px solid black;}</style><body><div class="box"></div></body>
</html>

接着我们通过调整各个边框（例如border-top）的属性后发现 这些分割点棱角分明

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>.box {width: 150px;height: 150px;border-top: 50px solid cyan;border-right: 50px solid red;border-bottom: 50px solid green;border-left: 50px solid gray;}</style><body><div class="box"></div></body>
</html>

在把宽高都设为0后，发现这个图形逐渐清晰起来 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>.box {width: 0px;height: 0px;border-top: 50px solid cyan;border-right: 50px solid red;border-bottom: 50px solid green;border-left: 50px solid gray;}</style><body><div class="box"></div></body>
</html>

把任意两个三角形颜色设为一样，剩下的透明后就能获得三角形了

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>.box {width: 0px;height: 0px;border-top: 50px solid red;border-right: 50px solid red;border-bottom: 50px solid transparent;border-left: 50px solid transparent;}</style><body><div class="box"></div></body>
</html>

 

同理，通过改变边框的border-radius属性还能让其变成圆形，环等。 

相关文章：

【CSS】画个三角形或圆形或环

首先通过调整边框&#xff0c;我们可以发现一些端倪 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><style>.box{width: 150px;height:150px;border: 50px solid black;}</style&g…...

编程日记 2023/9/15 23:09:32

AI项目六：基于YOLOV5的CPU版本部署openvino

若该文为原创文章&#xff0c;转载请注明原文出处。 一、CPU版本DEMO测试 1、创建一个新的虚拟环境 conda create -n course_torch_openvino python3.8 2、激活环境 conda activate course_torch_openvino 3、安装pytorch cpu版本 pip install torch torchvision torchau…...

编程日记 2023/9/15 23:05:28

记录YDLidar驱动包交叉编译时出现的一点问题

由于一不小心把交叉编译的系统根目录破坏了&#xff0c;所以一股脑将交叉编译系统根目录全删了重新安装&#xff0c;安装后&#xff0c;交叉编译发现ydlidar的ros包驱动出现了库无法链接的错误(刚刚还是好好的)&#xff0c;但是又想不起来之前是怎么解决的了&#xff0c;所以还…...

编程日记 2023/9/15 23:03:27

嵌入式学习笔记（32）S5PV210的向量中断控制器

6.6.1异常处理的2个阶段 可以将异常处理分为2个阶段来理解。第一个阶段是异常向量表跳转&#xff1b;第二个阶段是进入了真正的异常处理程序irq_handler之后的部分。 6.6.2回顾&#xff1a;中断处理的第一个阶段&#xff08;异常向量表跳转阶段&#xff09;处理 &#xff08;…...

编程日记 2023/9/15 23:02:26

linux下安装qt、qt触摸屏校准tslib

linux下安装qt 在 Linux 系统下安装 Qt&#xff0c;可以通过以下步骤进行操作&#xff1a;1. 下载 Qt 安装包&#xff1a;首先&#xff0c;你需要从 Qt 官方网站&#xff08;https://www.qt.io/&#xff09;下载适用于 Linux 的 Qt 安装包。选择与你的系统和需求相匹配的版本&…...

编程日记 2023/9/15 23:01:25

C++之unordered_map，unordered_set模拟实现

unordered_map&#xff0c;unordered_set模拟实现 哈希表源代码哈希表模板参数的控制仿函数增加正向迭代器实现*运算符重载->运算符重载运算符重载! 和 运算符重载begin()与end()实现 unordered_set实现unordered_map实现map/set 与 unordered_map/unordered_set对比哈希表…...

编程日记 2023/9/15 22:59:23

React Router，常用API有哪些？

react-router React Router是一个用于构建单页面应用程序&#xff08;SPA&#xff09;的库&#xff0c;它是用于管理React应用中页面导航和路由的工具。SPA是一种Web应用程序类型&#xff0c;它在加载初始页面后&#xff0c;通过JavaScript来动态加载并更新页面内容&#xff0…...

编程日记 2023/9/15 22:58:22

JVM类加载和双亲委派机制

当我们用java命令运行某个类的main函数启动程序时&#xff0c;首先需要通过类加载器把类加载到JVM&#xff0c;本文主要说明类加载机制和其具体实现双亲委派模式。 一、类加载机制 类加载过程&#xff1a; 类加载的过程是将类的字节码加载到内存中的过程&#xff0c;主要包括…...

编程日记 2023/9/15 22:57:21

P-MVSNet ICCV-2019 学习笔记总结 译文 深度学习三维重建

文章目录 5 P-MVSNet ICCV-20195.0 主要特点5.1 文章概述5.2 研究方法5.2.1 特征提取5.2.2 学习局域匹配置信5.2.3 深度图预测5.2.4 Loss方程MVSNet系列最新顶刊 对比总结5 P-MVSNet ICCV-2019 深度学习三维重建 P-MVSNet-ICCV-2019（原文、译文、批注） 下载 5.0 主要特点 …...

编程日记 2023/9/15 22:55:20

vueshowpdf 移动端pdf文件预览

1、安装 npm install vueshowpdf -S2、参数 属性说明类型默认值v-model是否显示pdf--pdfurlpdf的文件地址String- scale 默认放大倍数 Number1.2 minscale 最小放大倍数 Number0.8 maxscale 最大放大倍数 Number2 3、事件 名称说明回调参数closepdf pdf关闭事件-pdferr文…...

编程日记 2023/9/15 22:53:18

C#根据excel文件中的表头创建数据库表

C#根据excel文件中的表头创建数据库表 private void button1_Click(object sender, EventArgs e){string tableName tableNameTextBox.Text;string connectionString "";using (OpenFileDialog openFileDialog new OpenFileDialog()){openFileDialog.Filter &quo…...

编程日记 2023/9/15 22:51:17

js通过xpath定位元素并且操作元素以下拉框select为例

js也可以使用xpath定位元素&#xff0c;现在实例讲解。 页面上有一个下拉框&#xff0c;里面内容有三个&#xff0c;用F12看一下 一、使用xpath定位这个下拉框select eldocument.evaluate(//select[name"shoppingPreference"], document).iterateNext()二、为下拉框…...

编程日记 2023/9/15 22:49:15

数据类型

目录 1.数值类型 整数类型 int 小数类型 double 2.字符类型 固定长度字符串 char 可变长度字符串 varchar 3.日期时间类型 日期类型&#xff1a;date 日期时间类型&#xff1a;datetime MySQL从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article…...

编程日记 2023/9/15 22:48:15

vue 模板应用

一&#xff0c;模板应用也就是对DOM的操作 二&#xff0c;如何使用 通过标签里面添加ref 和vue中使用 this.$refs.ref的名字.操作 进行使用 <template><h3>模板引用</h3><div ref"cont" class"cont">{{ content }}</div>&…...

编程日记 2023/9/15 22:46:13

Golang教程与Gin教程合集，入门到实战

GolangGin框架GormRbac微服务仿小米商城项目实战视频教程Docker Swarm K8s云原生分布式部署 介绍&#xff1a; Go即Golang&#xff0c;是Google公司2009年11月正式对外公开的一门编程语言&#xff0c;它不仅拥有静态编译语言的安全和高性能&#xff0c;而 且又达到了动态语言开…...

编程日记 2023/9/15 22:43:08

国家网络安全周 | 天空卫士荣获“2023网络安全优秀创新成果大赛优胜奖”

9月11日上午&#xff0c;四川省2023年国家网络安全宣传周在泸州开幕。在开幕式上&#xff0c;为2023年网络安全优秀创新成果大赛——成都分站赛暨四川省“熊猫杯”网络安全优秀作品大赛中获奖企业颁奖&#xff0c;天空卫士银行数据安全方案获得优秀解决方案奖。 本次比赛由四川…...

编程日记 2023/9/15 22:39:05

Swift学习笔记一（Array篇）

目录 0 绪论 1 数组的创建和初始化 2.数组遍历 2.1通过键值对遍历 2.2 通过forEach遍历 2.3 通过for in遍历 2.3.1 for in 搭配 enumerated 2.3.2 for in的另一种形式 2.3.2 for in 搭配 indices 2.4 通过Iterator遍历器遍历 3 数组的操作 3.1 contains 判断数组包含…...

编程日记 2023/9/15 22:38:04

C++项目实战——基于多设计模式下的同步异步日志系统-②-前置知识补充-不定参函数

文章目录 专栏导读不定参函数C风格不定参函数不定参宏函数 专栏导读 &#x1f338;作者简介&#xff1a;花想云 &#xff0c;在读本科生一枚&#xff0c;C/C领域新星创作者&#xff0c;新星计划导师&#xff0c;阿里云专家博主&#xff0c;CSDN内容合伙人…致力于 C/C、Linux 学…...

编程日记 2023/9/15 22:36:02

C++使用Boost库加入UDP组播时程序崩溃

程序崩溃情况 本程序运行在Oracle VM VirtualBox虚拟的Ubuntu20.04上 terminate called after throwing an instance of ‘boost::wrapexceptboost::system::system_error’ what(): set_option: No such device 已放弃 (核心已转储) ** C使用Boost库加入组播的代码 #inclu…...

编程日记 2023/9/15 22:31:58

华为HCIA（四）

链路聚合可以负载分担&#xff0c;增加带宽&#xff0c;提高可靠性 Eth-trunk的传输速率和成员端口数量喝带宽有关 路由器分割广播域&#xff0c;交换机分割冲突域 指定端口&#xff1a;DP;根端口&#xff1a;RP;阻塞端口&#xff1a;AP 如果目的MAC不在交换机MAC中&…...

编程日记 2023/9/15 22:29:56

Qt --- Day01

效果图&#xff1a; 头像的圆形未实现 单击登陆&#xff0c;触发信号与槽 enter_widget.h #ifndef ENTER_H #define ENTER_H#include <QDialog> #include<QLabel> #include<QTimer> class enter_widget : public QDialog {Q_OBJECT public:explicit enter_…...

编程日记 2023/9/15 22:28:55

24.98万起，新一代AITO问界M7值得买吗？

监制 | 何玺 排版 | 叶媛 问界汽车新品来袭。 9月12日下午&#xff0c;问界汽车为全新的M7系列车型举行了发布会。华为常务董事余承东&#xff0c;在全网一片“遥遥领先”呼声的烘托下&#xff0c;上台发表演讲&#xff0c;详细介绍了M7的全面升级和各大亮点。 01 新一代AI…...

编程日记 2023/9/15 22:27:54

Java毕业设计 SSM SpringBoot 水果蔬菜商城

Java毕业设计 SSM SpringBoot 水果蔬菜商城 SSM 水果蔬菜商城 功能介绍 首页 图片轮播 关键字搜索商品 分类菜单 折扣大促销商品 热门商品 商品详情 商品评价 收藏 加入购物车 公告 留言 登录 注册 我的购物车 结算 个人中心 我的订单 商品收藏 修改密码 后台管理 登录 商品…...

编程日记 2023/9/15 22:25:52

前端JS中的异步编程与Promise

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 一、JavaScript的异步编步机制 二、事件循环&#xff08;Event Loop&#xff09;和任务队列&#xff08;Task Queue…...

编程日记 2023/9/15 22:22:50

Pytorch Advanced(二) Variational Auto-Encoder

自编码说白了就是一个特征提取器&#xff0c;也可以看作是一个降维器。下面找了一张很丑的图来说明自编码的过程。 自编码分为压缩和解码两个过程。从图中可以看出来&#xff0c;压缩过程就是将一组数据特征进行提取&#xff0c; 得到更深层次的特征。解码的过程就是利用之前的…...

编程日记 2023/9/15 22:20:48

Flask 使用 JWT（三）flask-jwt-extended

如果想要在 flask 中使用 JWT ，推荐使用 flask-jwt-extended 插件。 使用 pip 安装这个扩展插件的最简单方法是: pip install flask-jwt-extended基本使用 在接下来的案例中，我们看一下基本使用。我们可以使用 create_access_token() 函数用来生成实际的 JWT token。@jwt_r…...

编程日记 2023/9/15 22:19:47

堆与栈的区别

OVERVIEW 栈与堆的区别一、程序内存分区中的堆与栈1.栈2.堆3.堆&栈 二、数据结构中的堆与栈1.栈2.堆 三、堆的深入1.堆插入2.堆删除&#xff1a;3.堆建立&#xff1a;4.堆排序&#xff1a;5.堆实现优先队列&#xff1a;6.堆与栈的相关练习 栈与堆的区别 自整理&#xff0c;…...

编程日记 2023/9/15 22:17:45

OpenWrt kernel install分析（2）

一. 前言 接下来分析make -C image compile install TARGET_BUILD。 二. Makefile分析 1. 命令首先运行target/linux/mediatek/image/Makefile,该文件内容如下&#xff1a; target/linux/mediatek/image/Makefile: include $(TOPDIR)/rules.mk include $(INCLUDE_DIR)/image.…...

编程日记 2023/9/15 22:16:44

【计算机网络】传输层协议——TCP(下)

文章目录 1. 三次握手三次握手的本质是建立链接&#xff0c;什么是链接&#xff1f;整体过程三次握手过程中报文丢失问题为什么2次握手不可以&#xff1f;为什么要三次握手&#xff1f; 2. 四次挥手整体过程为什么要等待2MSL 3. 流量控制4. 滑动窗口共识滑动窗口的一般情况理解…...

编程日记 2023/9/15 22:08:38

Vue前端页面打印

前端依赖10-插件"print-js": “^1.6.0” 一&#xff1a;简介 print-js 是一个 Vue.js 插件&#xff0c;用于在 Vue.js 项目中实现打印功能。它依赖于 print-js 库&#xff0c;所以需要安装这个库。 能实现以下功能&#xff1a; PDF打印&#xff08;默认&#xff…...

编程日记 2023/9/15 22:04:33

wordpress使用两个主题/什么是搜索引擎竞价推广

图集本报讯(记者任敏)本周&#xff0c;海淀、朝阳等区举行中考英语听说机考模拟演练。记者从北京教育考试院了解到&#xff0c;新的中考英语听说机考占40分&#xff0c;包括四道大题、五种题型&#xff0c;分别为听后选择、听后回答、听后记录信息、听后转述和朗读短文。根据市…...

编程日记 2025/1/25 0:48:59

查询网站空间的服务商/重庆seo网站管理

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2022年T电梯修理考试练习题系T电梯修理复习题的新全考试题型&#xff01;2022年T电梯修理操作证考试题库模拟考试平台操作依据T电梯修理新版考试题库。T电梯修理全部考试题库随时根据安全生产模拟考试一点通上模拟考场…...

编程日记 2025/1/24 21:52:18

怎么做外贸企业网站/广州抖音推广公司

实践观察&#xff0c;但凡是有一定乒乓球基础的人&#xff0c;学网球底线尤其是正手&#xff0c;上手特别快。这是为什么呢&#xff1f;两点&#xff1a;一是&#xff0c;拍面角度感觉好。打开多少&#xff0c;关闭多少&#xff0c;手上有数。二是&#xff0c;球的飞行轨迹判断…...

编程日记 2025/1/24 21:28:06

手机网站建设方案/seo排名赚

T1:背单词(bzoj4567)题解代码 T2:幸运数字(bzoj4568)题解代码 T3:萌萌哒(bzoj4569)T4:妖怪(bzoj4570)T5:美味(bzoj4571)题解代码 T6:围棋(bzoj4572)总结 T1:背单词(bzoj4567) 题解 关键词&#xff1a;trie树 贪心 题意有些难懂&#xff0c;简单解释一下。 对于在位置xx的单…...

编程日记 2025/1/24 16:29:01

站长号/上海网站推广服务

今天&#xff0c;在网上看到一个题目&#xff0c;关于布局的&#xff0c;左边固定宽&#xff0c;右侧自适应(不少于3种方法)&#xff0c;看到问题手痒自己试了一下&#xff0c;想了四种方法&#xff0c;码一下。有好的方法&#xff0c;可以告诉我&#xff01;html:第一种:定位m…...

编程日记 2025/1/24 14:21:58

吾享crm客户管理系统/长沙seo网络推广

问题描述&#xff1a; 在 window 2008 R2 下Cygwin中&#xff0c;使用ssh localhost命令&#xff0c;出现Connection closed by 127.0.0.1的问题。 解决方案&#xff1a; 1、开始——运行——services.msc 2、右键CYGWIN sshd——属性——登录选项卡——选择“此账户”——浏览…...

编程日记 2025/1/24 12:39:51