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

用CSS创造三角形案例

news 2026/3/27 7:27:18

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来创建，角上是平分的，所以要是内部宽高为0，其他边透明，正好是三角形。代码 div {border: 12px solid;width: 0;height: 0;border-color: transparent red transparent transparent; } 与伪元素aft…...

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

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

%对比两张图片的Ycbcr分量的差值并形成直方图，改个路径就能用，图片分辨率要一致 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选项如下图： 二、那么如何自定义安全dns功能呢？ 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

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

编程日记 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进行边缘计算

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

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

力扣最小覆盖子串

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

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

python的内存管理机制

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

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

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

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

编程日记 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集成一、云平台创建实例参考文档： 阿里云api 阿里云创建实例二、skd集成思路公司用的RocketMQ一般是自建开源apache的RocketMQ和上阿里云的RocketMQ，目前阿里云支持4.x和5.x版本项目集成思路&…...

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

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

查看源代码 ，这是需要先登录，然后再去做xss攻击使用admin ，123456 登陆; 登陆后，输入的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 中，除了核心的响应式 API&#x…...

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

(undone) MIT6.824 Lab1

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

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

SpringMVC——REST

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Llama-3.2V-11B-cot镜像免配置：内置模型加载进度条与超时重试机制

Llama-3.2V-11B-cot镜像免配置：内置模型加载进度条与超时重试机制 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具，专为双卡4090环境深度优化。这个工具解决了传统大模型部署中的多个痛点&#xf…...

编程新知 2026/3/27 4:56:21

Flutter：从零到APK，手把手教你完成Android应用签名与打包

1. 环境准备与基础概念在开始Flutter应用打包之前，我们需要确保开发环境已经正确配置。首先确认你的电脑上已经安装了以下工具： Flutter SDK（建议最新稳定版）Android Studio（包含Android SDK）Java JDK&…...

编程新知 2026/3/27 4:13:47

OpenClaw对接GLM-4.7-Flash：模型版本管理指南

OpenClaw对接GLM-4.7-Flash：模型版本管理指南 1. 为什么需要关注模型版本管理上周我在调试一个自动化文档处理流程时，遇到了一个奇怪的现象：同样的OpenClaw脚本，前一天还能完美运行的文档摘要功能，第二天突然开始输…...

编程新知 2026/3/27 3:31:07

3步解决HEIC预览难题：面向Windows用户的高效缩略图工具

3步解决HEIC预览难题：面向Windows用户的高效缩略图工具【免费下载链接】windows-heic-thumbnails Enable Windows Explorer to display thumbnails for HEIC files 项目地址: https://gitcode.com/gh_mirrors/wi/windows-heic-thumbnails 在数字影像管理中&…...

编程新知 2026/3/27 2:00:40

线程池核心参数与拒绝策略深度解析

前言线程池是Java并发编程中最常用的工具之一，但很多开发者只停留在“会用”层面。面试中，面试官往往通过线程池考察你对并发编程的理解深度——参数如何设置？为什么这样设置？拒绝策略如何选择？ 本文将深入剖析线程池…...

编程新知 2026/3/27 1:56:39

TranslucentTB启动失败解决方案：3种方法修复Microsoft.UI.Xaml.2.8缺失问题

TranslucentTB启动失败解决方案：3种方法修复Microsoft.UI.Xaml.2.8缺失问题【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB T…...

编程新知 2026/3/27 1:56:39

SEO_2024年最新SEO策略与趋势深度解析（162 ）

<h1 id"2024seo">2024年最新SEO策略与趋势深度解析</h1> <h2 id"seo">前言：SEO的重要性不减速</h2> <p>在数字化时代，网络已成为信息传播、商业营销和客户互动的重要平台。搜索引擎优化（S…...

编程新知 2026/3/27 1:32:21

效率直接起飞！盘点2026年全民喜爱的的AI论文写作工具

一天写完毕业论文在2026年已不再是天方夜谭。2026年最炸裂的AI论文写作工具，实测提速效果惊人，覆盖选题、文献、写作、降重、排版全流程，让你高效搞定论文不再难。一、全流程王者：一站式搞定论文全链路（一天定稿首选&…...

编程新知 2026/3/27 0:37:33

asp毕业设计下载（全套源码+配套论文）——基于asp+access的公司门户网站设计与实现

基于aspaccess的公司门户网站设计与实现（毕业论文程序源码） 大家好，今天给大家介绍基于aspaccess的公司门户网站设计与实现，更多精选毕业设计项目实例见文末哦。文章目录： 基于aspaccess的公司门户网站设计与实现&a…...

编程新知 2026/3/26 23:53:16

【实战解析】从期末试题到工程实践：摄影测量核心概念与计算全攻略

1. 从试卷到工地：摄影测量核心概念实战指南第一次接触航测项目时，我盯着任务书上的"相机选型""航线规划"等要求完全懵了。这和期末考试那些名词解释、计算题有什么关系？直到在工地摔打半年后才明白，那些看似…...

编程新知 2026/3/26 23:00:49

6.3.2 用CSS创造三角形

相关文章：