H5中利用after伪元素做三角箭头的翻转效果
我们可以通过以下代码实现以上效果,这类三角形的应用场景还是比较多的,用伪元素来实现的话可以一定程度上净化代码,并且操作起来相对简单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
/* 这里采用定位,让伪类元素叠加在div盒子上 一定记得给父级盒子添加相对定位 否则子级盒子的定位就是相对于整个body*/
position: relative;
width: 249px;
height: 30px;
border: 1px solid #000;
}
div::after {
/* 注意,调用after伪类或者before伪类时一定要加content 伪元素要生效,必须添加 content 属性。*/
content: