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.hqwc.cn/news/205533.html

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

相关文章

想分析全国用电及煤气、液化石油气供应利用情况,这部分数据对你有帮助!

随着经济的发展和人民生活水平的提高&#xff0c;能源的需求量越来越大。其中&#xff0c;电力和煤气、液化石油气等能源的供应利用情况与我们的日常生活息息相关。 今天我们根据《中国城市统计年鉴》统计的中国地级及以上城市的煤气及液化石油气供应及利用情况的指标&#xff…

洗内裤的小洗衣机买啥牌子的?性价比婴儿洗衣机推荐

在近些年来&#xff0c;人们对生活和健康的要求越来越高&#xff0c;所以内衣洗衣机也走进了人们的视线&#xff0c;许多研究显示&#xff0c;单纯的手洗是不能彻底消除体内的细菌的&#xff0c;而机洗则可以有效地消除大部分的细菌&#xff0c;但是机洗内衣裤对洗衣机的卫生要…

MySQL数据库入门到大牛_基础_11_数据处理之增删改

本章将会介绍DML中的增删改查操作&#xff0c;增删改泛泛来讲是针对表中数据的修改。 文章目录 1. 插入数据1.1 实际问题1.2 方式1&#xff1a;VALUES的方式添加1.3 方式2&#xff1a;将查询结果插入到表中 2. 更新数据3. 删除数据4. 小结5. MySQL8新特性&#xff1a;计算列6. …

如何正确复制CSDN文章到自己的博客

1.csdn 文章页面&#xff0c;按f12打开浏览器开发者工具 2.按ctrl f 找 "article_content" 3.在该元素源代码上右键 “Copy”->“Copy element” 4.新建一个txt文件,把你粘贴的东西复制进去,然后再把文件名的后缀改为html,然后打开html文件,把里面的内容ctrlA全部…

【腾讯云云上实验室-向量数据库】腾讯云开创新时代,发布全新向量数据库Tencent Cloud VectorDB

前言 随着人工智能、数据挖掘等技术的飞速发展&#xff0c;海量数据的存储和分析越来越成为重要的研究方向。在海量数据中找到具有相似性或相关性的数据对于实现精准推荐、搜索等应用至关重要。传统关系型数据库存在一些缺陷&#xff0c;例如存储效率低、查询耗时长等问题&…

VSCode配置用户代码段以及常用快捷键汇总

一&#xff1a;前言 VSCode 是一款由微软开发的轻量级编辑器&#xff0c;可以安装插件和兼容多种语言。其本身已经是目前前端开发所使用的主流软件。那么在开发过程中&#xff0c;我们经常要写很多重复性的代码&#xff0c;比如当你去新建一个 .vue 页面的时候&#xff0c;往往…

服务器中了elbie勒索病毒解决办法,elbie勒索病毒解密数据恢复

科技技术的不断发展&#xff0c;为企业的生产运营提供了极大便利&#xff0c;但网络安全威胁也不断增加&#xff0c;近期云天数据恢复中心陆续接到很多企业的求助&#xff0c;企业的服务器中了elbie勒索病毒&#xff0c;导致系统瘫痪&#xff0c;所有业务无法正常开展&#xff…

全球首款容器计算产品重磅发布,激活上云用云新范式

云布道师 10 月 31 日&#xff0c;杭州云栖大会上&#xff0c;阿里云云原生应用平台负责人丁宇宣布&#xff0c;阿里云容器计算服务 ACS 正式发布&#xff01;ACS 将大幅降低企业和开发者用云门槛&#xff0c;真正将 Serverless 理念大规模落地。 容器计算服务 ACS&#xff0c…

【CodeTop】TOP 100 刷题 11-20

文章目录 11. 二叉树的层序遍历题目描述代码与解题思路 12. 搜索旋转排序数组题目描述代码与解题思路 13. 买卖股票的最佳时机题目描述代码和解题思路 14. 岛屿数量题目描述代码与解题思路 15. 环形链表题目描述代码与解题思路 16. 有效的括号题目描述代码与解题思路 17. 合并两…

使用 millis() 函数作为延迟的替代方法(电位器控制延迟时间)

接线图&#xff1a; 代码&#xff1a; unsigned long currentMillis 0; unsigned long previousMillis_LED1 0; unsigned long LED1_delay0; unsigned long previousMillis_LED2 0; unsigned long LED2_delay0; #define LED1 3 #define LED2 9 #define P1 A2 …

2023年中国离心制冷机产量及产业链分析[图]

离心制冷机是一种常用的空调制冷设备&#xff0c;目前主要应用于酒店、写字楼、商场、学校等众多大型场所的集中制冷场景。离心制冷机由离心式制冷压缩机、蒸发器、冷凝器、主电动机、抽气回收装置、润滑系统、控制柜和起动柜等零部件组成。这些零部件的组成有的采用分散型组装…