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);
}

修改前的效果是这样,实心的蓝色三角形。

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

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

相关文章

【每周一测】Java阶段三阶段考试

目录 1、SpringBoot在整合RabbitMQ时需要导入的包是 2、下列关于RabbitMQ的confirm消息确认机制解释说明正确的是 3、关于SpringBoot的配置文件&#xff0c;以下说法正确的是&#xff08;&#xff09; 4、变量命名规范说法正确的是? 5、哪个关键字可以对对象加互斥锁&…

优思学院|质量管理怎样才能做好?

质量管理怎样才能做好&#xff1f;这是一个好问题&#xff0c;很多人第一时间会想到建立一个稳定的质量管理体系&#xff0c;例如ISO9001&#xff0c;又或者善用QC七大手法等等&#xff0c;虽然以上这些方法都是实用和正确的&#xff0c;绝大多数企业通常最忽略的&#xff0c;其…

如何设计鞋材出库入账管理系统

如何设计鞋材出库入账管理系统 系统概述系统需求分析系统设计系统实施与测试系统上线与维护 系统概述 本系统旨在设计一个针对鞋材出库入账管理的数字化解决方案&#xff0c;以提高管理效率、降低运营成本并确保材料账目清晰。系统将结合先进的信息化技术&#xff0c;实现对鞋…

备案信息一键查询:网站备案信息查询API的操作与优势

前言 在当今数字化的时代&#xff0c;企业的在线存在至关重要。而为了确保在网络空间的法规合规性&#xff0c;了解和管理网站备案信息变得尤为重要。为了使这一过程更为高效、便捷&#xff0c;网站备案信息查询API应运而生&#xff0c;为企业提供了一种简便的方式来获取和管理…

如何打造适用的MES管理系统解决方案

在当前的制造业领域&#xff0c;项目型生产企业面临着独特的挑战。尽管国外的大型软件公司提供了某些解决方案&#xff0c;但由于地域、文化和制度的差异&#xff0c;这些方案并不完全满足企业的实际需求。为了解决这一难题&#xff0c;我们必须以客户为中心&#xff0c;围绕他…

图像处理Laplacian 算子

在图像处理中&#xff0c;Laplacian算子是一种常用的图像处理技术&#xff0c;用于检测图像中的边缘和轮廓。OpenCV中的Laplacian算子是一种二阶微分算子&#xff0c;用于计算图像的拉普拉斯变换&#xff0c;以便突出图像中的边缘和特征。其原理是对图像进行二阶导数运算&#…

docker容器内安装vim 加速

这里要使用国内镜像源&#xff0c;有一部分镜像源目前不好使了 前后用过清华镜像镜像源&#xff08; http://mirrors.tuna.tsinghua.edu.cn/debian/ &#xff09;、163镜像源&#xff08;http://mirrors.163.com/debian/&#xff09;目前都不太行了 更换为阿里云镜像源&#…

数字逻辑电路基础-时序逻辑电路之锁存器

文章目录 一、锁存器简介二、verilog源码三、综合及仿真结果一、锁存器简介 本文介绍数字逻辑电路中一种常用的基础时序逻辑电路-锁存,顾名思义,它的功能就是将输入在控制信号有效时透明传输到输出端,当控制信号无效时,输出值保持不变。它具有记忆和存储功能。这是它区别组…

一个专门针对代理IP的很认真的调研来咯!

参与爬虫工程师岗位服务需求调研&#xff0c;认真填写即可获得&#xff1a; 1. 美团外卖无门槛10元红包直充。 2. 企业在职工程师加送代理池1个月。https://www.wjx.cn/vm/wFjHU1l.aspx# 请认真填写哦&#xff0c;一经采纳即可获得奖励&#xff01;

eventbus

跨级通信&#xff0c;不相干的vue之间传值和调用方法 首先创建eventbus.js // src/utils/EventBus.js 文件 import Vue from vue// 向外共享 Vue 的实例对象 export default new Vue() 在传值页面导入 import { EventBus } from "/utils/EventBus.js"; 使用方式 …

处理无线debug问题

无限debug的产生 条件说明 开发者工具是打开状态 js代码中有debugger js有定时处理 setInterval(() > {(function (a) {return (function (a) {return (Function(Function(arguments[0]" a ")()))})(a)})(bugger)(de, 0, 0, (0, 0)); }, 1000); ​ #这里就…

java斗牛,咋金花

无聊时间&#xff0c;打发下游戏 简单说下思路 目录 1.创建牌对象 2.创建52张牌&#xff0c;不包含大小王 3.洗牌 4.发牌 1.创建牌对象 2.创建52张牌&#xff0c;不包含大小王 3.洗牌 4.发牌 /*** 扑克牌*/ public class Poker {/*** 花色*/private String cardSuits…

供应链和物流的自动化新时代

今天&#xff0c;当大多数人想到物流自动化时&#xff0c;他们会想到设备。机器人、无人机和自主卡车运输在大家的谈话中占主导地位。全自动化仓库的视频在网上流传&#xff0c;新闻主播们为就业问题绞尽脑汁。这种炒作是不完整的&#xff0c;它错过了供应链和物流公司的机会。…

Talk | PSU助理教授吴清云:AutoGen-用多智能体对话开启下一代大型语言模型应用

本期为TechBeat人工智能社区第548期线上Talk&#xff01; 北京时间11月21日(周二)20:00&#xff0c;宾夕法尼亚州立大学助理教授—吴清云的Talk已准时在TechBeat人工智能社区开播&#xff01; 她与大家分享的主题是: “ AutoGen&#xff1a;用多智能体对话开启下一代大型语言模…

4.2V升多串LED驱动升压6V9V12V恒流点灯

4.2V升多串LED驱动升压6V9V12V恒流点灯 探索WT7012&#xff0c;这款引领潮流的升压转换器&#xff0c;其强大功能将彻底改变您的LED驱动格局。可以轻松驾驭多达7串白光LED&#xff0c;展现出无与伦比的驱动能力。 无论是单节锂电池还是多节锂电池供电产品&#xff0c;宽电压3…

RISCV 工具链下载链接

Tool Chain Downloads – Embecosm

linux输出的重定无效问题和解决

我们在调试程序或者打印日志时经常会遇到重定向的问题,而有时候会遇到重定向无效的问题,下面给一个简单的例子,首先写一个简单的test.c #include <stdio.h>int main(){fprintf(stdout, "hello\n");fprintf(stderr, "world\n");return 0; }编译生…

结构体类型

结构体是一种构造数据类型&#xff0c;把不同类型的数据整合在一起&#xff0c;每一个数据都称为该结构体类型的成员。 结构体&#xff08;struct&#xff09;数据类型可以把基本数据类型和派生类组合起来&#xff0c;以描述复杂的事物。结构类型也是派生类型。 基本数据类型…

SELinux零知识学习二十四、SELinux策略语言之类型强制(9)

接前一篇文章&#xff1a;SELinux零知识学习二十三、SELinux策略语言之类型强制&#xff08;8&#xff09; 二、SELinux策略语言之类型强制 3. 访问向量规则 AV规则就是按照对客体类别的访问许可指定具体含义的规则&#xff0c;SELinux策略语言目前支持四类AV规则&#xff1a…

数据库管理变更工具

Bytebase 是一个开源的数据库管理工具&#xff0c;旨在简化团队协作和版本控制数据库架构和数据的过程。它提供了以下主要功能&#xff1a; 1. 数据库架构管理&#xff1a;Bytebase 允许用户创建和管理数据库架构&#xff0c;并支持版本控制&#xff0c;使团队成员可以协同编辑…