Question

如何删除面包屑的最后一个边框。我正在附上plunkr链接
我需要删除像image.please找到附加图像和plunkr链接边框。箭头带有白色背景和蓝色边框。

＆＃13;

ul {
  padding: 0;
  font-size: 0;
  overflow: hidden;
  display: inline-block;
  border: 1px solid #0174DF;
}

li {
  display: inline-block;
}

span {
  font-size: 1rem;
  position: relative;
  display: inline-block;
  background: #ffffff;
  text-decoration: none;
  color: black;
  padding: 13px 25px 13px 10px;
}

span:after,
span:before {
  position: absolute;
  content: "";
  height: 0;
  width: 1px;
  top: 50%;
  left: -25px;
  margin-top: -24px;
  border: 24px solid #ffffff;
  border-right: 0 !important;
  border-left-color: transparent !important;
}

span:before {
  left: -26px;
  border: 24px solid #0174DF;
}

＆＃13;

<ul>
  <li><span>  Home </span></li>
  <li><span>  about </span></li>
  <li><span>  History </span></li>
  <li><span>  contact us </span></li>
</ul>

＆＃13;

Answer 1

  ul{
  padding:0;
  font-size:0;
  overflow:hidden;
  display:inline-block;
  border:1px solid #0174DF;
   border-right:none;
  <!--   blue -->
}
 li{
  display:inline-block;
}
span{
  font-size:1rem;
  position:relative;
  display:inline-block;
  background:#ffffff;
  text-decoration:none;
  color:black;
  padding:13px 25px 13px 10px;
}
 span:after,
 span:before{
  position:absolute;
  content:"";
  height:0;
  width:1px;
  top:50%;
  left:-25px;
  margin-top: -24px;
  border:      24px solid #ffffff;
  border-right: 0 !important;
  border-left-color: transparent !important;
}
 span:before{
  left:-26px;
  border: 24px solid #0174DF;
}

    <div style="display:flex">
    <ul>
        <li><<span>  Home </span></li>
        <li><<span>  about </span></li>
         <li><<span>  History </span></li>

      </ul>
        <span>  contact us </span>
       </div>
  </body>

Answer 2

在这里：Plunker preview

我采用了不同的方法，使得span的伪元素成为一个45度旋转的立方体，边框的两边代表箭头形状。然后按照你的意愿隐藏最后一个span的伪元素。

<!DOCTYPE html>
<html>
<head>
	<style>
		* {
			box-sizing: border-box;
		}

		body {
			background: white;
		}

		ul {
			display: inline-block;
			padding: 0;
			border-left: 1px solid #0174DF;
			background: white;
		}

		li {
			display: inline-block;
			border-top: 1px solid #0174DF;
			border-bottom: 1px solid #0174DF;
		}

		li:last-child {
			border: none;
		}

		span {
			display: inline-block;
			font-size: 1rem;
			position: relative;
			background: transparent;
			text-decoration: none;
			color: black;
			padding: 13px 10px 13px 35px;
		}

		li:first-child span {
			padding-left: 10px;
		}

		span::before {
			content: '';
			height: 33.5px;
			width: 33.5px;
			position: absolute;
			top: -1px;
			right: -17px;
			bottom: 0;
			margin: auto;
			background: transparent;
			border-top: 1px solid #0174DF;
			border-right: 1px solid #0174DF;
			transform: rotate(45deg);
		}

		li:last-child span::before {
			display: none;
		}


	</style>
</head>
<body>

	<ul>
		<li><span> Home </span></li><li><span> About </span></li><li><span> History </span></li><li><span> Contact us </span></li>
	</ul>

</body>
</html>

Answer 3

li:last-child{
   position: absolute;
}

如何删除面包屑的最后一个边框

3 个答案: