源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
height: 400px;
background: rgb(99, 96, 96);
}
/* 第一种写法 */
.list1 {
width: 50px;
height: 200px;
}
/* vue 的这个:root 写在App.vue里面的style里面全局样式，或者写在重置样式文件全局，才能生效！！！*/
:root {
--radius-size: 15px;
--acticity-color: #fff;
}
.navActive {
background-color: #fff;
color: rgb(0, 63, 136);
position: relative;
}
.navActive::before,
.navActive::after {
content: "";
display: block;
height: var(--radius-size);
width: var(--radius-size);
position: absolute;
bottom: 0;
background: radial-gradient(var(--radius-size) at var(--radius-size) 0px,
transparent var(--radius-size),
var(--acticity-color) var(--radius-size));
}
.navActive::before {
right: 0;
bottom: calc(-1 * var(--radius-size));
transform: scale(-1);
}
.navActive::after {
right: 0;
top: calc(-1 * var(--radius-size));
transform: scaleX(-1);
}
/* 第二种写法(1) 横向写法 */
.list2 {
position: relative;
left: 10px;
}
.bg3 {
width: 100px;
height: 30px;
/* background: #00CAF5; */
background: #FFF;
/* 111111. 下面这个相对定位必须有！！！ */
position: relative;
}
/* 下面注释为横向 */
.bg3::after {
content: '';
/* 111111. 下面这个绝对定位必须有！！！ */
position: absolute;
top: -19px;
right: 0;
width: 20px;
height: 20px;
background: radial-gradient(circle at 0% 0%, transparent 20px, #FFF 0)
}
.bg3::before {
content: '';
/* 2222222. 下面这个绝对定位必须有！！！ */
position: absolute;
bottom: -19px;
right: 0;
width: 20px;
height: 20px;
background: radial-gradient(circle at 100% 0%, transparent 20px, #FFF 0);
transform: rotate(180deg);
}
/* 第二种写法(2) 纵向写法 */
.list3 {
position: relative;
left: 100px;
top: 100px;
}
.bg4 {
width: 100px;
height: 30px;
background: #00CAF5;
/* 111111. 下面这个相对定位必须有！！！ */
position: relative;
}
/* 下面注释为纵向 background里面颜色可以更改*/
.bg4::after {
content: '';
position: absolute;
left: -20px;
bottom: 0;
width: 20px;
height: 20px;
background: radial-gradient(circle at 0% 0%, transparent 20px, #00caf5 0)
}
.bg4::before {
content: '';
position: absolute;
right: -20px;
bottom: 0;
width: 20px;
height: 20px;
background: radial-gradient(circle at 100% 0%, transparent 20px, #00caf5 0)
}
</style>
<body>
<div class="box">
<!-- 第一种写法 -->
<!-- 这个拉伸[缩放百分比]浏览器，会出现bug，有小细条 -->
<div class="list1">
<div class="nav">首页</div>
<div class="nav navActive">页面一</div>
<div class="nav">页面二</div>
</div>
<!-- 用第二种兼容好一些 -->
<!-- 第二种写法 (1) -->
<div class="list2">
<div class="bg3"> </div>
</div>
<!-- 第二种写法(2) -->
<div class="list3">
<div class="bg4"> </div>
</div>
</div>
</body>
</html>
效果如下
推荐博主
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！