CSS伪元素实现三角形
什么是伪元素:
css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。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就可以搞定
<div class="triangle"></div>
3、效果图
CSS伪元素实现三角形相关推荐
- 利用CSS伪元素写三角形
在做一些网页布局的时候,经常会遇到各种方向的三角形,常常令人头疼,今天给大家介绍一些利用CSS伪元素写各个方向三角形的方法 目录 一.CSS伪元素写三角形 1.向右的三角形 2.向上的三角形 3.向下 ...
- css3伪类做三角型,css伪元素写三角形
先说伪元素和伪类的区别: 伪类是针对CSS,而伪元素是针对HTML,伪类选择器是CSS选择器的一种,而伪类是"假"的HTML标签 伪类(选择器)本质上是为了弥补常规CSS选择器的不 ...
- css 商城 两列_如何使用css伪元素实现超实用的图标库(附源码)
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识 伪元素 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
- 用CSS伪元素制作箭头
现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...
- html 的css骚操作,意想不到的 CSS 伪元素 before/after 各种骚操作 - 文章教程
CSS 伪元素 before/after 我们经常用到,常见的就是画个三角形.绘画背景阴影等,这篇文章将给大家分享还有很多有趣的操作,比如画线画图标等. 画细线 普通的 border 最小高度为1px ...
- css伪元素覆盖,CSS :befor :after 伪元素的巧妙用法
本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...
- css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是 类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑 它们 都 ...
- [JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
- 教你玩转CSS 伪元素
目录 CSS 伪元素 语法 :first-line 伪元素 :first-letter 伪元素 伪元素和CSS类 多个伪元素 CSS - :before 伪元素
最新文章
- ASP.NET Core的配置(5):配置的同步[设计篇]
- 网络设置巨形帧_Trunk的概念与设置
- 工业界 vs. 学术界: 一个年轻员工的视角
- C++primer :const限定符
- squid代理服务器在企业网中的应用
- 空间曲率(曲速)引擎的数学原理及示意图
- 《老罗Android开发视频教程-安卓巴士》(Android 开发)
- Jackson的JSON——JsonUtils工具类
- Hello World CGAL 5.4入门
- 图片转excel软件有哪些?这些软件你值得拥有
- 基于python的消息轰炸
- ie浏览器html状态栏隐藏,我的IE浏览器忽然上面的菜单栏及地址栏都不见了
- 【Babel】1186- 保姆级教学!这次一定学会 Babel 插件开发!
- ERP实施设防三大雷区(转载)
- 关于windows微软账号登陆不进去的问题
- ThinkingInJava_吸血鬼数
- 【Galois系统】用于图形分析的轻量级基础架构
- (十八)用JAVA编写MP3解码器——迷你播放器
- BI学习笔记之六 - 数据仓库介绍
- 计算机内存条能装几个,笔记本电脑可以装几个内存条_笔记本电脑最多可以插多少条内存-win7之家...