CSS实现空心的“尖角”
大家好，我是南宫，来分享一个昨天解决的问题。
我记得之前刷面试题的时候，CSS面试题里面赫然有一题是“如何用CSS实现三角形”，我觉得这个问题确实很经典，我上的前端培训班当初就讲过。
大概思路如下：
先把这个元素（更多时候用的是伪元素）的宽高设为0，然后给它设置一个较大的border-width（大小根据三角形的大小来决定）。这样，4条边实际上都是三角形了。
然后根据三角形的方向和颜色，只设置其中的一个边框颜色为目标颜色，其他三个边框颜色都为透明色，三角形就出来了。
然后再随便设置一下定位，就可以做成类型对话框尖角的效果。
简单写一个示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.sjx {width: 0;height: 0;border: 20px solid transparent;border-bottom-color: skyblue;}</style></head><body><div class="sjx"></div></body>
</html>
结果昨天我看到UI图里面出现了空心的尖角，差点气死我：
本来这个三角形就是用4条边框硬挤出来的，哪里来的多余的边框用来描边？
最后我还是做到了，效果如下：
思路是这样的：
因为这里有描边，所以border要用在描边这里，那么三角形就不能用border来实现了。
我这里实际上并不是三角形的，而是正方形的：
这样看就很明显了，实际上是放了一个正方形在这里，正方形的背景色跟里面的背景色一样，所以看不出来；
只给这个正方形设置了两条边框，颜色跟外圈的颜色一致；
然后给正方形旋转一个方向，让有边框的朝上，再微调一下位置，就可以了。
代码如下：（定位的代码我就省略了）
body.theme-deep .el-popper[x-placement^='bottom'] .popper__arrow::after, body.theme-deep .el-select-dropdown.el-popper[x-placement^='bottom'] .popper__arrow::after, body.theme-deep .el-dropdown-menu.el-popper[x-placement^='bottom'] .popper__arrow::after {width: 9px;height: 9px;border: none;border-top: 1px solid #0c84ff;border-right: 1px solid #0c84ff;background: #0b3277;transform: rotate(-45deg) translateX(2px) translateY(1px);
}修改前的效果是这样，实心的蓝色三角形。
相关文章：
CSS实现空心的“尖角”
大家好，我是南宫，来分享一个昨天解决的问题。 我记得之前刷面试题的时候，CSS面试题里面赫然有一题是“如何用CSS实现三角形”，我觉得这个问题确实很经典，我上的前端培训班当初就讲过。 大概思路如下： 先…...
算法 全排列的应用
#include <iostream> #include <string>using namespace std;// 交换字符串中两个字符的位置 void swap(char& a, char& b) {char temp a;a b;b temp; }void fun(string str) {string a str.substr(0,4); int aa;sscanf(a.c_str(), "%d",…...
环境配置|GitHub——如何在github上搭建自己写的网站
下面简单地总结了从本地的网页文件到在github服务器上展示出来即可以通过网络端打开的过程： （以下可能会出现一些难点，照着做就可以了，由于笔者是小白，也不清楚具体原理是什么，希望有一天成为大神的时候能轻…...
Windows系统中curl和wget命令下载说明
前言 当需要在命令行中发送 HTTP 请求时，常用的工具有 curl 和 wget。它们可以帮助你下载文件，发送 POST 或 GET 请求，以及检查网页内容等。 curl: curl 是一个功能强大的命令行工具，支持多种协议（例如 HTTP、HTTPS、…...
山西电力市场日前价格预测【2023-11-24】
日前价格预测 预测说明： 如上图所示，预测明日（2023-11-24）山西电力市场全天平均日前电价为415.13元/MWh。其中，最高日前电价为685.26元/MWh，预计出现在18:00。最低日前电价为296.84元/MWh，预计…...
说说你对 shell 的理解以及常见的命令？
面试官：说说你对 shell 的理解？常见的命令？ 一、是什么 Shell 是一个由c语言编写的应用程序，它是用户使用 Linux 的桥梁。Shell 既是一种命令语言，又是一种程序设计语言 它连接了用户和Linux内核，让用户能…...
数据结构之双向带头循环链表函数功能实现与详细解析
个人主页：点我进入主页 专栏分类：C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 数据结构初阶 欢迎大家点赞，评论，收藏。 一起努力，一起奔赴大厂。 目录 1.前言 2.带头双…...
SpringBoot_websocket实战
SpringBoot_websocket实战 前言1.websocket入门1.1 websocket最小化配置1.1.1 后端配置1.1.2 前端配置 1.2 websocket使用sockjs1.2.1 后端配置1.2.2 前端配置 1.3 websocket使用stomp协议1.3.1 后端配置1.3.2 前端配置 2.websocket进阶2.1 websocket与stomp有什么区别2.2 webs…...
香港科技大学广州｜机器人与自主系统学域博士招生宣讲会—同济大学专场！！！（暨全额奖学金政策）
在机器人和自主系统领域实现全球卓越—机器人与自主系统学域 硬核科研实验室，浓厚创新产学研氛围！ 教授亲临现场，面对面答疑解惑助攻申请！ 一经录取，享全额奖学金1.5万/月！ 🕙时间：…...
python基于GCN（图卷积神经网络模型）和LSTM（长短期记忆神经网络模型）开发构建污染物时间序列预测模型
在以往的时间序列预测建模中广泛使用的是回归类算法模型和RNN类的算法模型，相对来说技术栈会更稳定一些，最近有一个实际业务场景的需求，在建模的过程中要综合考虑其余点位的影响依赖，这时候我想到了之前做过的交通流量和速度预测相…...
SpringMVC问题
文章目录 SpringMVC运行流程MVC的概念与请求在MVC中的执行路径，ResponsBody注解的用途SpringMVC启动流程 SpringMVC运行流程 • 客户端（浏览器）发送请求，直接请求到 DispatcherServlet 。 • DispatcherServlet 根据请求信息调用 …...
【Linux】Linux的常用基本指令
Linux常用基本指令 Linux指令的历史背景前言说明一、 ls 列出文件中的所有内容常用选项 二、pwd 显示当前所在目录进程三、cd 将当前工作目录改变到指定的目录下常用样例 四、touch 1. 更改文档或目录的日期时间 2. 新建一个不存在的文件常用选项 四、mkdir 1. 更改文档或目录的…...
气候变化和人类活动对中国植被固碳的贡献量化数据月度合成产品
简介： 气候变化和人类活动对中国植被固碳的贡献量化数据月度合成产品包括中国2001~2018年地表短波波段反照率、植被光合有效辐射吸收比、叶面积指数、森林覆盖度和非森林植被覆盖度、地表温度、地表净辐射、地表蒸散发、地上部分自养呼吸、地下部分自养呼吸、总初级…...
定位鼠标悬浮才出现的元素
第一步：按F12进入开发者模式 第二步：点击Sources. 第三步：鼠标进入，触发悬浮框弹出，然后鼠标停止不要移动。 第四步：按F8 或者（Ctrl\），正常情况下，此时页…...
【css/vue】使用css变量，在同一个页面根据不同情况改变字号等样式
解决方法是：将 css 的属性使用 v-bind 与 Vue 组件的属性绑定，当组件的属性变化时，css 对应的属性值也就会随之变化； 具体实现代码： <template><div><span class"navTitle">标题名</s…...
在springboot中实现WebSocket协议通信
前面介绍了使用netty实现websocket通信，有些时候，如果我们的服务并不复杂或者连接数并不高，单独搭建一个websocket服务端有些浪费资源，这时候我们就可以在web服务内提供简单的websocket连接支持。其实springboot已经支持了websock…...
云原生Docker系列 | Docker私有镜像仓库公有镜像仓库使用
云原生Docker系列 | Docker私有镜像仓库&公有镜像仓库使用 1. 使用公有云镜像仓库1.1. 阿里云镜像仓库1.2. 华为云镜像仓库1.3. 腾讯云镜像仓库2. 使用Docker Hub镜像仓库3. 使用Harbor构建私有镜像仓库4. 搭建本地Registry镜像仓库1. 使用公有云镜像仓库 1.1. 阿里云镜像…...
用于 syslog 收集的协议：TCP、UDP、RELP
系统日志是从 Linux/Unix 设备和其他网络设备（如交换机、路由器和防火墙）生成的日志 可以通过将 syslog 聚合到称为 syslog 服务器、syslog 守护程序或 syslogd 的服务器来集中 syslog。在TCP、UDP和RELP协议的帮助下，系统日志从设备传输到系…...
OpenAI创始人山姆·阿尔特曼重返公司；LLM持续学习
🦉 AI新闻 🚀 OpenAI创始人山姆阿尔特曼重返公司并与微软建立合作伙伴关系 摘要：OpenAI创始人山姆阿尔特曼回归OpenAI，担任首席执行官，并与微软建立牢固的合作伙伴关系。这解决了近期的争论，微软对OpenAI…...
Ant Design Pro生产环境部署
Ant Design Pro是通过URL路径前缀/api访问后端服务器，因此在nginx配置以下代理即可。 location / {index.html } location /api {proxy_pass: api.mydomain.com }...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
React Native 开发环境搭建（全平台详解）
React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式（Singleton Pattern&#…...
从零实现STL哈希容器：unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理
引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...