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

用CSS创造三角形案例

news 2026/5/13 1:02:04

6.3.2 用CSS创造三角形

用div来创建，角上是平分的，所以要是内部宽高为0，其他边透明，正好是三角形。

代码

div {border: 12px solid;width: 0;height: 0;border-color: transparent red transparent transparent;
}

与伪元素after结合起来,在6.3.弹出层.html中增加CSS:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>figure {width: 144px;height: 153px;margin: 20px 20px;border: 1px solid #666;position: relative;float: left;}img {width: 144px;height: 153px;display: block;}figcaption {display: none;/* 隐藏弹出层 */position: absolute;/* 相对于容器 */left: 74%;/* 放到右边 */top: 15px;width: 130px;/* 弹出层宽度 */padding: 10px;/* 弹出层内边距 */background-color: #f2eaea;border: 3px solid red;border-radius: 6px;}/* 鼠标悬停在图片上显示 */figure:hover figcaption {display: block;}figcaption h3 {/*弹出层的内容*/font-size: 14px;color: #666;margin-bottom: 6px;}figcaption a {/*弹出层的内容*/display: block;text-decoration: none;font-size: 12px;color: #000;}/* 把弹出层设置为最高层 */figure:hover figcaption {display: block;z-index: 2;}/* 红色三角形盒子 */figcaption::after {content: "";position: absolute;border: 12px solid;border-color: transparent red transparent transparent;height: 0px;width: 0px;top: 17px;right: 100%;}</style>
</head><body><figure><img src="img/pink.jpg" alt="pink heels" /><figcaption><h3>Pink Platforms</h3><a href="#">More info</a></figcaption></figure><figure class="click_me"><img src="img/baowen.jpg" alt="baowen heels" /><figcaption><h3>Leopard Platforms</h3><a href="#">More info</a></figcaption></figure><figure class="click_me"><img src="img/red.jpg" alt="red heels" /><figcaption><h3>Red Platforms</h3><a href="#">More info</a></figcaption></figure>
</body></html>

相关文章：

用CSS创造三角形案例

6.3.2 用CSS创造三角形 用div来创建&#xff0c;角上是平分的&#xff0c;所以要是内部宽高为0&#xff0c;其他边透明&#xff0c;正好是三角形。 代码 div {border: 12px solid;width: 0;height: 0;border-color: transparent red transparent transparent; } 与伪元素aft…...

编程日记 2024/10/2 17:21:33

matlab-对比两张图片的Ycbcr分量的差值并形成直方图

%对比两张图片的Ycbcr分量的差值并形成直方图&#xff0c;改个路径就能用&#xff0c;图片分辨率要一致 close all; clear all; clc; I1imread(E:\test\resources\image\1.jpg); I2imread(E:\test\resources\image\2.jpg); ycbcr1 rgb2ycbcr(I1); ycbcr2 rgb2ycbcr(I2); % …...

编程日记 2024/10/2 17:20:32

Chromium 使用安全 DNS功能源码分析c++

一、选项页安全dns选项如下图&#xff1a; 二、那么如何自定义安全dns功能呢&#xff1f; 1、先看前端部分代码调用 shared.rollup.jsclass PrivacyPageBrowserProxyImpl {.................................................................getSecureDnsResolverList() {re…...

编程日记 2024/10/2 17:17:29

10.1 刷题

C语言 C...

编程日记 2024/10/2 17:16:28

车辆重识别（2021ICML改进的去噪扩散概率模型）论文阅读2024/9/29

所谓改进的去噪扩散概率模型主要改进在哪些方面&#xff1a; ①对数似然值的改进 通过对噪声的那个方差和T进行调参&#xff0c;来实现改进。 ②学习 这个参数也就是后验概率的方差。通过数据分析&#xff0c;发现在T非常大的情况下对样本质量几乎没有影响&#xff0c;也就是说…...

编程日记 2024/10/2 17:14:26

828华为云征文｜针对Flexus X实例云服务器的CPU和内存性能测评

目录 一、Flexus X实例云服务器简介 1.1 产品摘要 1.2 产品优势 1.3 本次测评服务器规格 二、CPU性能测试 2.1 操作说明 2.2 操作步骤 2.2 结果分析 三、测试内存负载 3.1 操作说明 3.2 操作步骤 3.3 结果分析 四、测试终评 一、Flexus X实例云服务器简介 1.1 产品…...

编程日记 2024/10/2 17:13:25

Python知识点：如何使用Google Cloud IoT与Python进行边缘计算

开篇&#xff0c;先说一个好消息&#xff0c;截止到2025年1月1日前&#xff0c;翻到文末找到我&#xff0c;赠送定制版的开题报告和任务书&#xff0c;先到先得&#xff01;过期不候&#xff01; 如何使用Google Cloud IoT与Python进行边缘计算 边缘计算作为一种新兴的计算模式…...

编程日记 2024/10/2 17:12:23

力扣 最小覆盖子串

最小覆盖子串 https://leetcode.cn/problems/minimum-window-substring/ 题目描述 题目分析f 覆盖子串&#xff1a;首先根据题意&#xff0c;要求目标字符串的元素必须都在子串中出现过&#xff0c;这表明可以是乱序出现。所以在解决问题是我们需要对子串和目标字符串做匹配&a…...

编程日记 2024/10/2 17:11:22

python的内存管理机制

python的内存管理机制主要分为三个部分&#xff1a;引用计数、垃圾回收和内存池机制。 引用计数机制&#xff1a; python通过维护每个对象的引用计数来跟踪内存中的对象。当对象被创建时就会有一个引用计数&#xff0c;当对象不再被使用时&#xff0c;引用计数为0&#xff0c…...

编程日记 2024/10/2 17:10:20

阿布量化：基于 Python 的量化交易框架

阿布量化&#xff08;AbuQuant&#xff09; 是一个开源的量化交易框架&#xff0c;专为金融领域的研究者和交易者设计。它基于 Python 语言开发&#xff0c;提供了一整套从数据获取、策略开发、回测分析到交易执行的解决方案。阿布量化不仅能够帮助用户快速实现量化策略的设计与…...

编程日记 2024/10/2 17:09:19

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-09-28

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-09-28 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-09-28目录前言1. Cognitive phantoms in LLMs through the lens of latent variables摘要研究背景问题与挑战创新点算法模型实验效果…...

编程日记 2024/10/2 17:08:17

【tower-boot 系列】开源RocketMQ和阿里云rockerMq 4.x和5.x集成 (一)

RocketMQ 简单介绍 阿里云rockerMq 4.x和5.x集成 一、云平台创建实例 参考文档&#xff1a; 阿里云api 阿里云 创建实例 二、skd集成思路 公司用的RocketMQ一般是自建开源apache的RocketMQ和上阿里云的RocketMQ&#xff0c;目前阿里云支持4.x和5.x版本 项目集成思路&…...

编程日记 2024/10/2 17:06:14

Pikachu-Cross-Site Scripting-反射型xss(post)

查看源代码 &#xff0c;这是需要先登录&#xff0c;然后再去做xss攻击 使用admin &#xff0c;123456 登陆; 登陆后&#xff0c;输入的message 内容直接返回 输入 <script>alert(1)</script> 得到xss攻击结果...

编程日记 2024/10/2 17:04:11

Vue3 工具函数（总结）

目录 前言 1.isRef 2.isReactive 3.isReadonly 4.isProxy 5.toRef 6.toRefs 7.unref 8.shallowRef 9.shallowReactive 10.triggerRef 11.customRef 12.markRaw 13.toRaw 14.readonly 15.watchEffect 前言 在 Vue 3 中&#xff0c;除了核心的响应式 API&#x…...

编程日记 2024/10/2 17:02:09

(undone) MIT6.824 Lab1

参考&#xff1a;http://nil.csail.mit.edu/6.824/2021/labs/lab-mr.html task1: 熟悉讲义&#xff0c;尤其是搞明白如何运行测试程序(完成) ------------------------------------------------ start 先看 Introduction 我们的目标&#xff1a;构建一个MapReduce系统。 细节&…...

编程日记 2024/10/2 17:01:08

SpringMVC——REST

路径请求方式请求行为 查询&#xff1a;GET 新增&#xff1a;POST 修改&#xff1a;PUT 删除&#xff1a;DELETE 有重复的东西怎么办...

编程日记 2024/10/2 17:00:05

【牛客网刷题记录】【java】二叉树

&#xff08;1&#xff09;二叉树的前中后遍历 最基本的树的遍历&#xff0c;不会可以重开了 public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** * param root TreeNode类 * return int整型一维…...

编程日记 2024/10/2 16:59:03

一文讲透大语言模型构建流程

最近已有不少大厂都在秋招宣讲了&#xff0c;也有一些在 Offer 发放阶段。 节前&#xff0c;我们邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对新手如何入门算法岗、该如何准备面试攻略、面试常考点、大模型技术趋势、算法项目落地经验分享等热门话题进行了…...

编程日记 2024/10/2 16:54:58

VR视频怎样进行加密和一机一码的使用？--加密（一）

在视频加密领域&#xff0c;我们常见接触的就是在普通设备上使用的加密视频&#xff0c;如电脑、手机、平板等。Vr的发展和兴起给人们带来最真实的体验感受&#xff0c;不仅在游戏行业应用较广&#xff0c;在一些影院或者元宇宙文旅、展厅等视频场景也备受青睐。 随着VR视频场景…...

编程日记 2024/10/2 16:51:56

Ubuntu启动后第一次需要很久才能启动GTK应用问题

Ubuntu启动后第一次需要很久才能启动GTK应用问题 自从升级了 Ubuntu 之后&#xff0c;设备重启&#xff0c;发现打开 Terminal 、Nautilus 以及其他的GTK 应用都很慢&#xff0c;需要至少一分钟的时间启动。 刚开始也是拿着 journalctl 的异常日志去寻找答案&#xff0c;但是没…...

编程日记 2024/10/2 16:50:55

如何在Windows上快速安装安卓应用：APK Installer终极指南

如何在Windows上快速安装安卓应用&#xff1a;APK Installer终极指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾经想要在Windows电脑上运行安卓应用&…...

编程新知 2026/5/12 22:46:42

自然语言编写嵌入式软件之点亮LED灯

要实现的功能&#xff1a; 控制LED以10HZ的频率闪烁 传统实现过程&#xff1a;学C语言&#xff0c;看数据手册了解MCU&#xff0c;学教程&#xff0c;copy代码&#xff0c;学编译调试环境&#xff0c;学仿真&#xff0c;学用仪器测量 自然语言编程实现过程&#xff1a; 搭建…...

编程新知 2026/5/12 21:07:44

外科医生AI认知变迁：从技术好奇到价值驱动的全球调查

1. 项目概述&#xff1a;一场关于外科医生与AI认知变迁的全球对话作为一名长期关注技术与医疗交叉领域的从业者&#xff0c;我始终对一个问题抱有浓厚兴趣&#xff1a;当一项颠覆性技术从实验室走向临床&#xff0c;真正使用它的医生们究竟在想什么&#xff1f;他们的期待、困惑…...

编程新知 2026/5/12 20:20:26

时间序列自监督学习实战：VIbCReg框架迁移与性能优化

1. 项目概述&#xff1a;当计算机视觉的自监督学习遇上时间序列在机器学习领域&#xff0c;获取高质量、大规模的标注数据一直是个老大难问题&#xff0c;尤其是在时间序列分析这个方向。无论是工业设备的振动监测、医疗心电信号分析&#xff0c;还是金融市场的波动预测&#x…...

编程新知 2026/5/12 19:15:50

BrowserClaw：容器化浏览器自动化平台部署与爬虫实战指南

1. 项目概述&#xff1a;一个浏览器自动化与数据抓取的瑞士军刀最近在折腾一些数据采集和自动化测试的活儿&#xff0c;发现一个挺有意思的开源项目&#xff0c;叫BrowserClaw。这名字起得挺形象&#xff0c;“浏览器之爪”&#xff0c;一听就知道是跟浏览器自动化、网页抓取相…...

编程新知 2026/5/12 16:30:19

Midjourney咖啡印相落地实操：3步完成色彩校准、5种纸张适配方案与打印机ICC配置清单

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney Coffee印相技术原理与工艺边界 Midjourney Coffee印相并非官方命名的技术标准&#xff0c;而是社区对一类融合生成式AI图像&#xff08;如Midjourney输出&#xff09;与传统咖啡渍显影工艺的…...

编程新知 2026/5/12 16:26:14

从用户态到内核态：Linux Hook技术的全景实践与攻防解析

1. Linux Hook技术入门&#xff1a;从概念到实践 第一次接触Hook技术是在十年前的一个安全分析项目中&#xff0c;当时需要监控某个可疑进程的行为。那时候我才明白&#xff0c;原来Linux系统里藏着这么多可以"截胡"程序执行的秘密通道。简单来说&#xff0c;Hook技术…...

编程新知 2026/5/12 16:24:10

可穿戴设备十年演进：从技术突破到健康与生产力工具

1. 从预言到现实&#xff1a;可穿戴计算浪潮的十年回望与深度拆解十年前&#xff0c;当EE Times那篇关于Apple iWatch和Google Glasses将引领可穿戴计算浪潮的文章发表时&#xff0c;业界还弥漫着一种将信将疑的氛围。彼时&#xff0c;智能手机正处巅峰&#xff0c;人们很难想象…...

编程新知 2026/5/12 15:50:12

HiveWE：基于C++20模块化架构的下一代魔兽争霸III地图创作引擎

HiveWE&#xff1a;基于C20模块化架构的下一代魔兽争霸III地图创作引擎 【免费下载链接】HiveWE A Warcraft III world editor. 项目地址: https://gitcode.com/gh_mirrors/hi/HiveWE HiveWE作为开源社区驱动的魔兽争霸III地图编辑器&#xff0c;通过现代C20模块化架构重…...

编程新知 2026/5/12 15:43:51

告别混乱：用SAP STO退货功能（NCR/NLR）清晰管理公司间物料退回

告别混乱&#xff1a;用SAP STO退货功能&#xff08;NCR/NLR&#xff09;清晰管理公司间物料退回 当集团企业发展到多工厂、多法人架构时&#xff0c;物料在组织间的流动管理往往成为供应链的痛点。特别是在退货场景下&#xff0c;手工处理导致的账实不符、责任归属模糊等问题&…...

编程新知 2026/5/12 15:22:51