CSS伪元素实现三角形

全栈程序员-站长 • 2026年3月16日下午4:17 • 未分类 • 阅读 3

CSS伪元素实现三角形什么是伪元素 css 的伪元素之所以被称为伪元素是因为他们不是真正的页面元素 html 没有对应的元素但是其所有用法和表现行为与真正的页面元素一样可以对其使用诸如页面元素一样的 css 样式表面上看上去貌似是页面的某些元素来展现实际上是 css 样式展现的行为因此被称为伪元素 css 有一系列的伪元素如 before after first line first letter

css有一系列的伪元素，如:before，:after，:first-line，:first-letter等。

1、CSS部分

.triangle{     width: 200px;     height: 100px;     border-radius: 5px;     border: 2px solid #000;     position: relative;  }  .triangle:after{     content: "";     position: absolute;     left: 200px;     top:12px;     width: 0;     height: 0;     border-top: 10px solid transparent;     border-left: 10px solid #fff;     border-right: 10px solid transparent;     border-bottom: 10px solid transparent;  }  .triangle:before{     content: "";     position: absolute;     left: 200px;     top:10px;     width: 0;     height: 0;     border-top: 12px solid transparent;     border-left: 12px solid #000;     border-right: 12px solid transparent;     border-bottom: 12px solid transparent;   }

2、html部分一个div就可以搞定

3、效果图

三角形

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/229618.html原文链接：https://javaforall.net

赞 (0)

0 0

关于作者

全栈程序员-站长

133.5K 文章

3 粉丝

本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”

HTTP 401 错误 – 未授权终极解决办法

上一篇 2026年3月16日下午4:17

scrapy爬虫学习系列四：portia的学习入门

下一篇 2026年3月16日下午4:18

词向量模型（1）[通俗易懂]

词向量模型（1）[通俗易懂]词向量模型one-hotVectorone-hotvector最简单的编码方式：假设我们的词库总共有n个词，那我们开一个1*n的高维向量，而每个词都会在某个索引index下取到1，其余位置全部都取值为0。问题这种词向量编码方式简单粗暴，我们将每一个词作为一个完全独立的个体来表达。遗憾的是，这种方式下，我们的词向量没办法给我们任何形式的词组相似性权衡。因为你开了一个极高维度的…

全栈程序员-站长
2022年5月8日
70
SSM项目结构

SSM项目结构SSM：Spring、SpringMVC和Mybatis，Spring是一个开源框架，用来解耦，方便实MVC；SpringMVC分离了控制器、模型对象、过滤器以及处理程序对象的角色，这种分离让它们更容易进行定制；MyBatis是一个基于Java的持久层框架，包括SQLMaps和DataAccessObjects（DAO），对数据库进行操作。SSM的项目结构：

全栈程序员-站长
2022年6月17日
95
python进制转换函数-Python中进制转换函数的使用

python进制转换函数-Python中进制转换函数的使用Python中进制转换函数的使用关于Python中几个进制转换的函数使用方法，做一个简单的使用方法的介绍，我们常用的进制转换函数常用的就是int()（其他进制转换到十进制）、bin()（十进制转换到二进制）、oct()（十进制转换到八进制）、hex()（十进制转换到十六进制）。下面我们逐个说下每个函数的用法。binbin()函数，是将十进制的数字转换成二进制的数字。其中bin()函数中传入的是十进…

全栈程序员-站长
2022年5月19日
38
2020湖南省ACM_acm个人赛

2020湖南省ACM_acm个人赛记2020年(第16届)湖南ACM省赛写在前面我很喜欢《龙族》里那个叫路明非的衰小孩。虽然我也不知道为什么要说这个，逃这个世界有多大，取决于你认识的人，你每认识一个人，世界对你来说就会变大一些——路明非热身赛今年蓝桥杯和热身赛冲突了，搞完蓝桥杯都1点了，急忙赶去长理签到一下~哈哈外市的参加完蓝桥杯就不太方便过来，就现得热身赛异常冷清了，没多少队伍。打开题目一看，好家伙。是去年省赛的原题。cjm：我不想写了我：？？（原来大佬都是这样子的）lb：？？（大佬啊）我看到签到题A就想到上

全栈程序员-站长
2022年10月8日
7
科大讯飞

科大讯飞星火座舱｜申报2025第七届金辑奖中国汽车新供应链百强

科大讯飞星火座舱｜申报2025第七届金辑奖中国汽车新供应链百强

全栈程序员-站长
2026年3月14日
2
PyCharm安装torch以及pytorch-pretrained-bert简单使用

PyCharm安装torch以及pytorch-pretrained-bert简单使用安装torch运行Pycharm中的代码时候提示ModuleNotFoundError:Nomodulenamed‘torch’。试了很多种方法都不行，然后进入官网查了下具体的安装方法，附上网址https://pytorch.org/get-started/previous-versions/。摘取一段放在这里供大家参考。#CUDA10.0pipinstalltorch===1.2.0torchvision===0.4.0-fhttps://download.pytorc

全栈程序员-站长
2022年8月28日
5

发表回复

关注全栈程序员社区公众号