Как убрать последнюю границу крошки - PullRequest
Новая
       0

Как убрать последнюю границу крошки

0 голосов
/ 25 апреля 2018

Как удалить последнюю границу хлебных крошек. Я прикрепляю ссылку plunkr
Мне нужно удалить границу, как изображение. Пожалуйста, найдите прикрепленное изображение и ссылку plunkr. Стрелка с белым фоном и синей рамкой.

enter image description here

плункерная ссылка хлебные крошки 

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;
}
<ul>
  <li><span>  Home </span></li>
  <li><span>  about </span></li>
  <li><span>  History </span></li>
  <li><span>  contact us </span></li>
</ul>

Ответы [ 3 ]

0 голосов
/ 25 апреля 2018

Вот, пожалуйста, Предварительный просмотр Plunker

Я выбрал другой подход и сделал псевдоэлементы пролета повернутым на 45 градусов кубом с двумя сторонами границ, чтобы представить формы стрелок. Затем спрятал псевдоэлемент последнего диапазона, как вы пожелали. 

<!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>
0 голосов
/ 25 апреля 2018 
li:last-child{
   position: absolute;
}
0 голосов
/ 25 апреля 2018 

  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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...