02-利用border实现网站常见的三角形
利用border实现网站常见的三角形
需求描述
我们经常在网站上见到hover三角形的效果,这个实现的其中一种方法就是利用伪标签:after和border属性实现的。
不比比 直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> *{ margin:0px; padding:0px; } #box{ width: 100px; height: 40px; position: relative; border: 1px solid red; margin: 100px auto; } #box:after{ content: ""; position: absolute; top:15px; right:-20px; width: 0px;/*盒子的宽高为0*/ height: 0px; border:5px solid red;/*给定border的样式*/ border-bottom:none;/*使底边框消失*/ border-left-color:transparent; /*左边框透明*/ border-right-color:transparent;/*右边框透明*/ } </style>
</head>
<body>
<div id="box"></div>
</body>
</html>
效果图:
还没有评论,来说两句吧...