css3伪类做三角型,css伪元素写三角形

先说伪元素和伪类的区别：

伪类是针对CSS，而伪元素是针对HTML，伪类选择器是CSS选择器的一种，而伪类是“假”的HTML标签

伪类(选择器)本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；

伪元素本质上是创建了一个有内容的虚拟容器；

在CSS3中，伪类和伪元素的语法得到了进一步的调整(一个冒号和两个冒号)；

在开发当中，可以同时使用多个伪类，而只能同时使用一个伪元素；

父元素

#demo{

margin: 100px;

width: 100px;

height: 100px;

border: 1px solid black;

position: relative;

}

伪元素

#demo:before{

content:"";

width:0;

height:0;

position: absolute;

top: 34px;

left: 100px;

border-top:solid 15px transparent;

border-left:solid 15px black ;

border-bottom:solid 15px transparent;

}

当修改成

border-right:solid 15px transparent;

border-left:solid 15px transparent;

border-bottom:solid 15px black;

下三角出现在上边线

当修改成

border-top:solid 15px black;

border-right:solid 15px transparent;

border-left:solid 15px transparent;

小三角在下边线

当修改成

border-top:solid 15px transparent;

border-right:solid 15px black;

border-bottom:solid 15px transparent;

小三角在左边线

这个也可以做成直角三角形，改成

border-right:solid 15px transparent;

border-bottom:solid 15px black;

css3伪类做三角型,css伪元素写三角形相关推荐

CSS 伪类: 什么是 CSS 伪类？CSS 伪类怎么分类？ CSS 伪类有哪些？以及分类对应的伪类
本章讲解的内容为 CSS 伪类 . 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) . 一: 什么是 CSS 伪类? 1. CSS 伪类是用来添加一些 ...
html 伪类样式偶数,CSS伪类nth-child怎么使用
CSS中有一个伪类nth-child,这个伪类该怎么使用呢?接下来的这篇文章就来给大家介绍一下CSS中的伪类nth-child的使用方法,我们来看具体的内容. nth-child是一个伪类,它为选择器 ...
Web前端线上系统课-01-HTML+CSS/08-结构伪类-图形-字体-字体图标-元素定位
结构伪类-图形-字体-字体图标-元素定位结构性伪类选择器 nth-child 父元素中的第n个子元素 nth-child(n) <!DOCTYPE html> <html lang ...
css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）
css 伪类选择器(链接伪类选择器.结构伪类选择器.目标伪类选择器) 链接伪类选择器:顾名思义就是用于链接的伪类选择器.a的伪类标签有:a:link.a:visited.a:hover.a:activ ...
利用CSS伪元素写三角形
在做一些网页布局的时候,经常会遇到各种方向的三角形,常常令人头疼,今天给大家介绍一些利用CSS伪元素写各个方向三角形的方法目录一.CSS伪元素写三角形 1.向右的三角形 2.向上的三角形 3.向下 ...
CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
css3伪类、表单控件伪类、文本相关伪类、afater清浮动、not选择器、毗邻元素、文字缩略
0804 css3伪类 target 突出显示活动的 HTML 锚 div:target{background: #0e3757;} 表单控件伪类 <style>input:enabled ...
前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
字体样式，文本样式，背景样式，边框样式，线性渐变，伪类选择器，css权重
`## CSS入门基础(二) 字体样式字体类型 font-family 字体大小 font-size 字体粗细 font-weight 100-700 400=normal 700=bold 字体得 ...

css3伪类做三角型,css伪元素写三角形

css3伪类做三角型,css伪元素写三角形相关推荐

最新文章

热门文章