利用after和before伪类实现chrome浏览器tab选项卡斜边纯css无图制作笔记

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{width: 100px;height: 40px;background: red;position: absolute;top: 50%;left: 50%;margin: -15px 0 0 -50px;}

a:before,
a:after{
content: "";
border-top: 42px solid transparent;
position: absolute;
top: -2px;
}
a:before{
border-right: 15px solid red;
left: -15px;
}
a:after{
border-left: 15px solid red;
right: -15px;
}
</style>
</head>
<body>
<a href="javascript;;"></a>
</body>
</html>

posted @ 2017-07-11 09:42  zhouyia~  阅读(1367)  评论(0编辑  收藏  举报