div+css布局实现三种breadcrumb导航当前位置效果代码-html代码-BFW代码库

div+css布局实现三种breadcrumb导航当前位置效果代码

代码语言：html

代码描述：div+css布局实现三种breadcrumb导航当前位置效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
.container {
  --b: 5px;   /* the border thickness */
  --a: 40deg;  /* control the shape */
  --c: #64908A;
  
  display: flex;
  color: var(--c);
}
.breadcrumb {
  position: relative;
  line-height: 1.65; /* control the height, don't use padding ! */
  padding-inline: calc(.5lh*tan(var(--a)) + var(--b)/cos(var(--a)));
  margin-inline-start: calc(-.5lh*tan(var(--a)) - var(--b)/cos(var(--a)));
  text-indent: .1em;
}
.breadcrumb:before {
  content:"";
  position: absolute;
  inset: 0;
  background: var(--c); /* or CurrentColor */
  clip-path: polygon(0 0,calc(100% - .5lh*tan(var(--a))) 0,100% 50%,calc(100% - .5lh*tan(var(--a))) 100%,0 100%,calc(.5lh*tan(var(--a))) 50%,0 0,calc(var(--b)*(tan(var(--a)) + 1/cos(var(--a)))) var(--b), calc(.5lh*tan(var(--a)) + var(--b)/cos(var(--a))) 50%,calc(var(--b)*(tan(var(--a)) + 1/cos(var(--a)))) calc(100% - var(--b)),calc(100% - .5lh*tan(var(--a)) - var(--b)*(1/cos(var(--a)) - tan(var(--a)))) calc(100% - var(--b)),calc(100% - var(--b)/cos(var(--a))) 50%,calc(100% - .5lh*tan(var(--a)) - var(--b)*(1/cos(var(--a)) - tan(var(--a)))) var(--b),calc(var(--b)*(tan(var(--a)) + cos(var(--a)))) var(--b))
}
.breadcrumb:first-child {
  text-indent: 0;
  padding-inline-start: calc(var(--b) + .2em);
}
.breadcrumb:first-child:before {
  clip-path: polygon(0 0,calc(100% - .5lh*tan(var(--a))) 0,100% 50%,calc(100% - .5lh*tan(var(--a))) 100%,0 100%,0 0,var(--b) var(--b),var(--b) calc(100% - var(--b)),calc(100% - .5lh*tan(var(--a)) - var(--b)*(1/cos(var(--a)) - tan(var(--a)))) calc(100% - var(--b)),calc(100% - var(--b)/cos(var(--a))) 50%,calc(100% - .5lh*tan(var(--a)) - var(--b)*(1/cos(var(--a)) - tan(var(--a)))) var(--b),var(--b) var(--b)) 
}
.last .breadcrumb:last-child {
  margin-inline-end: 0;
  padding-inline-end: calc(.........完整代码请登录后点击上方下载按钮下载查看