用CSS创造三角形案例

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/54284.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HUAWEI WATCH GT 系列安装第三方应用

文章目录 适用机型概述官方文档从源码构建 hap 文件和对源码签名下载和安装DevEco Studio下载和安装首次启动推荐&#xff1a;设置IDE推荐的兼容版本环境&#xff08;可选&#xff09;安装并启用中文菜单插件 使用DevEco Studio打开项目并进行构建构建问题解决一、生成密钥和证…

Grafana链接iframe嵌入Web前端一直跳登录页面的问题记录

概述 公司有个项目使用到Grafana作为监控界面,因为项目方的环境极其复杂,仅物理隔离的环境就有三四个,而且每个都得部署项目,今天在某个环境测试,查看界面遇到一个比较奇怪的Grafana问题,后面针对该问题进行跟踪分析并解决,故而博文记录,用于备忘。 问题 登录项目We…

Hive数仓操作(十三)

一、JSON 数据 JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;在不同的编程语言之间进行数据传输时非常通用和常用。JSON 格式简单直观&#xff0c;易于阅读和编写&#xff0c;并且可以被大多数编程语言轻松解析和生成。 1.…

数据结构与算法——Java实现 27.双端队列

很多人觉得做一件事付出了10分的努力&#xff0c;却只得到5分的汇报。 其实剩下的五分&#xff0c;是在填补你过往的懒惰。 只有将过往的懒惰填满&#xff0c; 努力才会有正向结果 —— 24.10.3 一、概述 双端队列、队列、栈对比&#xff1a; 队列 一端删除&#xff08;头&am…

C++ STL 初探:打开标准模板库的大门

文章目录 C STL 初探&#xff1a;打开标准模板库的大门前言第一章: 什么是STL&#xff1f;1.1 标准模板库简介1.2 STL的历史背景1.3 STL的组成 第二章: STL的版本与演进2.1 不同的STL版本2.2 STL的影响与重要性 第三章: 为什么学习 STL&#xff1f;3.1 从手动编写到标准化解决方…

探索云计算中的 Serverless 架构:未来的计算范式?

目录 引言 一、Serverless架构概览 二、Serverless 架构的优势 三、Serverless架构的挑战 四、Serverless架构的未来展望 五、结论 引言 在当今快速发展的 IT 行业中&#xff0c;云计算无疑占据了举足轻重的地位。随着技术的不断演进&#xff0c;云计算的一个新兴分支——…

Go语言实现长连接并发框架 - 请求分发器

文章目录 前言接口结构体接口实现项目地址最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;我们上篇博客实现了任务管理器的功能&#xff0c;接下来这篇博客我们将要实现请求分发模块的开发 接口 trait/dispatcher.go type Dispatcher interface {Start()Dispatch(conn…

每日一题学习笔记

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 请注意&#xff0c;你可以假定字符串里不包括任何不可打印的字符。 示例: 输入: "Hello, my name is John" 输出: 5 解释: 这里的单词是指连续的不是空格的字符&#xff0c;所以 "…

Golang | Leetcode Golang题解之第454题四数相加II

题目&#xff1a; 题解&#xff1a; func fourSumCount(a, b, c, d []int) (ans int) {countAB : map[int]int{}for _, v : range a {for _, w : range b {countAB[vw]}}for _, v : range c {for _, w : range d {ans countAB[-v-w]}}return }

骨架屏 (懒加载优化)

骨架屏 &#xff08;懒加载优化&#xff09; 即便通过 Webpack 的按需加载、CDN 静态资源缓存 和 代码分割 等技术来减少首屏的代码体积&#xff0c;首屏加载时的白屏时间&#xff08;也称为首屏等待时间&#xff09;仍然可能存在&#xff0c;尤其在网络条件较差或页面内容复杂…

【前端安全】js逆向之微信公众号登录密码

❤️博客主页&#xff1a; iknow181 &#x1f525;系列专栏&#xff1a; 网络安全、 Python、JavaSE、JavaWeb、CCNP &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐评论✍ 随着发展&#xff0c;越来越多的登录页面添加了密码加密的措施&#xff0c;使得暴力破解变得不在简单&a…

el-table添加fixed后错位问题

1 方案1 return {isShow:false, }mounted() {this.isShowtrue},watch: {$route(newRoute) {this.monitoredRoute newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中// 执行其他操作或调用其他方法},//或$route(newRoute) {this.monitoredRoute newRoute; // 将新…

python三局两胜游戏

分为以下步骤实现这个功能 1、猜拳 2、机器产生数值 3、人去猜数字&#xff0c;定义剪刀石头布 4、控制机器产生&#xff0c;123程序运行的时候可能会出现一点玄学问题&#xff0c;就是&#xff0c;提示n1这一行不符合pep8然后报错&#xff0c;不用管&#xff0c;运行就可以&am…

在Linux系统安装Nginx

注意&#xff1a;Nginx端口号是80(云服务器要放行) 我的是基于yum源安装 安装yum源(下面这4步就好了) YUM源 1、将源文件备份 cd /etc/yum.repos.d/ && mkdir backup && mv *repo backup/ 2、下载阿里源文件 curl -o /etc/yum.repos.d/CentOS-Base.repo ht…

【三步 完全离线搭建 openwebui 】

完全离线linux 版open webui 的搭建 1.在具有网络连接的环境中下载whl 在有网络的环境&#xff0c;使用pip download可以保存所有的依赖包,可以使用-i 指定清华的镜像源加速下载速度。 # 命令&#xff1a; pip download <package_name> --only-binary:all: --wheel --…

VS Code Python 文件导入提示 xxx Module 不存在解决方式

VS Code Python 文件导入提示 xxx Module 不存在解决方式 引言正文如何打开 setting.json 文件引言 之前在 https://blog.csdn.net/u011699626/article/details/142612579?spm=1001.2014.3001.5501 一文中我们介绍了如何配置 VS code 中 Jupyter Notebook 的文件导入环境,这…

接口+内部类

接口和内部类是Java中两个重要的概念&#xff0c;可以在代码中使用它们来实现更灵活和模块化的设计。 接口是一种定义了一组抽象方法的特殊类&#xff0c;其中的方法没有具体的实现。通过实现接口&#xff0c;一个类可以获得接口中定义的方法&#xff0c;并提供实际的实现。接…

使用rust写一个Web服务器——多线程版本

文章目录 模拟慢请求多线程Web服务器实现为每个请求单独生成一个线程限制创建线程的数量ThreadPool的初始化ThreadPool的存储ThreadPool的设计 关闭和资源清理为ThreadPool实现Drop停止工作线程测试 仓库地址&#xff1a; 1037827920/web-server: 使用rust编写的简单web服务器 …

2024年云南省职业院校技能大赛赛程规章(大数据赛项)

大家期待已久的职业院校技能大赛在各个省份已经陆续出新文件了&#xff0c;近日云南省的赛程规章也是出来了&#xff0c;我相信不仅是对云南&#xff0c;对其他省份也很有参考价值&#xff0c;小编为大家精简整理了一下文件的内容。 一、竞赛目标 为适应大数据产业对高素质技术…

【Spring Security】基于SpringBoot3.3.4版本②如何配置免鉴权Path

基于Spring Boot 3.3.4,详细说明Spring Security 6.3.3的使用 摘要本地开发环境说明SecurityFilterChain介绍application.ymlWen3SecurityProperties.java修改DemoWen3Security修改SecurityFilterChainIgnoredPathController.javaIgnoredPathController2.java启动工程测试测试…