css before 箭头,伪元素beforeafter以及制作三角箭头
1.:before伪元素和:after伪元素是干嘛用的
它们会在内容元素的前后插入额外的元素,:before伪元素会在内容元素的前面添加一个额外元素,:after伪元素会在内容元素的后面添加一个额外的元素。如果我们想在这些额外生成的伪元素中添加内容的话,那么我们可以使用content属性给其指定某个值,常见的比如说当我们想要在某个:before或者:after伪元素中使用fontawesome图标的话,那么我们可以像下面这样做:
搜索
button.upsubmit:before{
content: "\f15a";
font-family: FontAwesome;
font-size: 16px;
color: #fff;
}
2.需要注意的地方
1.利用伪元素:before以及:after生成的元素盒子的父元素是利用伪元素这个属性的那个元素盒子。
2.由伪元素生成的内容并没有脱离文档流。
3.由伪元素生成的元素盒子它是行内元素,而对于行内元素来说,你懂的,width以及height属性并不能使用。width以及height只适用于块元素以及替换元素。
4.如果你不给由伪元素生成的元素盒子应用content属性的话,那么这个生成的元素盒子将没有尺寸,毕竟padding以及margin的默认值都是0。
5.定位参考点的问题,:before伪元素生成的元素盒子的定位参考点是利用伪元素这个属性的那个元素盒子;:after伪元素生成的元素盒子的定位参考点是:before伪元素生成的元素盒子。
6.在补充一下稍微搭边的注意点:如果某个inline元素的position属性的值是absolute或者fixed的话,那么这个inline元素会变成block元素;如果某个inline元素设置了float属性的话,那么这个inline元素会变成block元素。给元素设置了transform属性的话,那么会使得元素具有类似position:relative的效果。
3.利用伪元素创建十二边形
根据上面的学习我们便可以了解到伪元素的大致用法了,所以下面直接看源代码应该可以理解:
.center, .center:before, .center:after{
width: 100px;
height: 100px;
background-color: tomato;
}
.center{
position: relative;
margin-top: 200px;
margin-right: 200px;
}
.center:before{
content: "";
position: absolute;//此时inline变block
transform: rotate(-60deg);
}
.center:after{
content: "";
display: inline-block;//定位不改成绝对定位也行,因为现在定位参考点已经是.center了
transform:rotate(60deg);
}
效果图
4.利用border属性创建三角形
border属性在众多css属性里面并不算是一个难以理解的属性,但就是这么一个简单的属性也能够给网页带来某些绚丽的效果。下面可以直接看例子以及运行结果:
*{
box-sizing: content-box;
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.show{
width: 100px;
height: 100px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-top: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-left: 50px solid yellow;
background-color: #233;
}
效果图
border交错的地方是被平分的,各自一半,所以便有了上面的效果。
那么问题来了,如果使元素盒子的content尺寸为0x0的话,然后在设置border的话会有什么效果呢?
*{
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
.show{
width: 100px;
height: 100px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-top: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-left: 50px solid yellow;
background-color: #233;
}
效果图
在上面的代码中我们将.show的元素盒子的box-sizing的属性设置为了border-box,所以当我们给元素设置width以及height的时候,它们涵盖了content-width,padding,border而我们的border-left加上border-right以及padding默认值为0(如果具有非0的padding值的话,那么盒子将会被撑开),所以content-width就变为0x0了,这个时候所带来的效果就像上面那样。
这个时候距离三角形已经很近了,在上面的效果图每边的border就是被一个三角形,那么问题来了,我们如何使得只出现一个三角形呢,想当然是只给一边设置border属性,但是这样是不行的,因为必须得出现交错得border才可能出现平分区域得现象,不平分的话那么border会表现出矩形的效果。
但是也不是说我们必须得定义每边得border,当然每边都定义的话也错不了。举个例子:
例子图
比如我们想要制作像二号三角形的话,那么我们只需要定义border-top以及border-bottom。
既然不能只定义一边的border的话,那么我们该如何排除其他几边border的影响呢?答案就是对干扰的那几边使用透明色。。。下面可以看看效果:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.show{
width: 100px;
height: 100px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-top: 50px solid transparent;
border-right: 50px solid green;
border-bottom: 50px solid transparent;
background-color: #233;
}
三角形
5.利用伪元素以及三角箭头制作漂亮的搜索框
css before 箭头,伪元素beforeafter以及制作三角箭头相关推荐
- [css] 如何使用伪元素实现增大点击热区来增加用户体验?
[css] 如何使用伪元素实现增大点击热区来增加用户体验? .extend-via-pseudo-elem {position: relative; }.extend-via-pseudo-elem: ...
- CSS 中的伪元素是什么,有什么用处
CSS 中的伪元素是一种特殊的元素,它们不是 HTML 元素,但通过 CSS 属性和关系运算符,我们可以为它们指定与实际 HTML 元素相同的样式.伪元素可以用于实现一些特殊的效果,比如动画.阴影.弹 ...
- 并不简单的翻页时钟(一):样式篇(Flex布局、line-height、data-set用法、css before after伪元素)
目录 并不简单的翻页时钟 我以为的翻页时钟 实际上的翻页时钟 关键的知识点 效果展示 代码解析 HTML CSS 详解CSS 1.display:flex 元素居中 2.:before .:after ...
- 【CSS】457- CSS 伪元素指南
层叠样式表(css)是一种独立的语言,用于描述web应用程序的表示.这涉及到诸如颜色.字体和HTML元素布局的完全控制等概念. 在本文中,将为您介绍级联样式表中的伪元素,以及如何将它们与兼容性一起使用 ...
- css伪元素覆盖,CSS :befor :after 伪元素的巧妙用法
本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...
- 【CSS进阶】伪元素的妙用--单标签之美
正文从这里开始,本文主要讲述一下 伪元素 before 和 after 各种妙用. :before和::before的区别 在介绍具体用法之前,简单介绍下伪类和伪元素.伪类大家听的多了,伪元素可 ...
- CSS before / after伪元素
CSS伪类对象 after和before的用法 IE对after.before是不支持的,请在firefox.opera.chrome下试调! :before 语法:Selector : before ...
- HTML与CSS基础之伪元素(五)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>伪元素 ...
- Python攻城师的成长————css语法、伪元素选择器(部分)
今日学习目标 熟悉并掌握css中各种修改属性的方法. 文章目录 今日学习目标 学习内容 一.伪元素选择器 css操作文本内容 选择器优先级 二.css修改属性 css修改文字属性 css修改字体属性 ...
- CSS如何使用伪元素选择器给所有的div里的文本前面添加小写罗马数字编号
一.需求说明 假设现在我有三个div标签,它们在浏览器里显示的内容如下图所示: 我希望使用CSS给它们全部添加上序号,添加好序号后的样子如下图所示: 可以看到序号是递增的,不是普通的阿拉伯数字,而是小 ...
最新文章
- 人脸识别登上Nature封面!看脸的世界,AI却心怀偏见
- oracle将一个表数据更新时间,Oracle批量更新,将一个表的数据批量更新另一表
- Direct 3D学习笔记(三)——光照与材质
- 转:使用NSOperationQueue简化多线程开发
- Linux iptables防火墙详解(三)——iptables匹配条件
- 修改OpenJDK字体渲染,无可见改进
- 2021荣耀秋招笔试代码题
- 操作 神通数据库_神通数据库-快速入门指南 PDF 下载
- pip install scikit-image安装失败,而且通过transform.rescale(img,0.6)时,原图像的通道数3变为2了,怎么解决?
- Peeking into the Future: Predicting Future Person Activities and Locations in Videos 翻译
- 埃米,音译为埃,符号为Å,1Å等于10^(-10)m,即纳米的十分之一
- BZOJ 2243: [SDOI2011]染色
- 20小时写一篇文章,好看到爆炸的手机壁纸都在这些App里!
- 计算机不能启动任务管理器,win10系统无法打开任务管理器怎么办
- 怎样让表格的行高一样_怎么把excel的行高变成一样的
- Python语言—爬虫之旅
- 光纤布线:如何测量光纤损耗与距离
- Vue实现仿微信,如飘柔般顺滑的页面转场动画
- 12.2烤仔建工×MetaEstate | K歌之王在元宇宙的秘密据点
- 西门子博途安装服务器未响应,西门子博途软件安装问题,急
热门文章
- ArcGIS API For Javascript之地图基本加载与显示,地图切换、缩放、定位、比例尺、鹰眼图、坐标显示、查询搜索功能实现
- Docker端口映射不起作用的解决办法
- java导出带图片excel
- 搜狗批量推送软件-搜狗批量推送工具【2022最新】
- php + redis 实现延迟队列
- 电脑键盘部分按键失灵_win10键盘个别按键失灵的原因及解决方法
- 郭天祥的10天学会51单片机_第五节
- mysql 打开sql日志,记录所有sql
- 单片机学习-利用intrins.h中的_crol_和_cror_进行流水灯位移
- python论文用到的外文参考文献_论文外文文献怎么找?