使面包屑V边界平滑

时间：2017-01-18 22:22:11

标签： html css

说明

我在网站上使用面包屑，现在我想将边框半径从1px更改为3px。

问题在于我无法找到使垂直V看起来平滑的方法。

当前视图位于左侧。右边的理想：

enter image description here enter image description here

SNIPPET

＆＃13;
＆＃13; 
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    background: hsl(184,65%,49%);
    font-family: 'Lato';
    color: #000;
    font: 15px/1.4em;
	margin:0;
	padding:0;
}


ul {
  list-style: none;
}

.cf:before, .cf:after {
  content: ' ';
  display: table;
}
.cf:after {
  clear: both;
}
 
.inner {
  margin: 0 auto;
}

.breadcrumbs {
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  background-color: #fff;
}

.breadcrumbs ul {
  border-left: 3px solid #000;
  border-right: 3px solid #000;
}

.breadcrumbs li {
  float: left;
  width: 33.3333333%;
}

.breadcrumbs a {
  font-family: 'Lato';
  position: relative;
  display: block;
  padding: 20px;
  padding-right: 0 !important;
  /* important overrides media queries */
  font-size: 1vw;
  font-weight: bold;
  text-align: center;
  color: #000;
  cursor: pointer;
}

.breadcrumbs a:hover {
  background: hsl(184,65%,49%);
}

.breadcrumbs a span:first-child {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  border: 2px solid #aaa;
  border-radius: 50%;
  background-color: #fff;
}

.breadcrumbs a:before,
.breadcrumbs a:after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 1;
  display: block;
  width: 0;
  height: 0;
  border-top: 32px solid transparent;
  border-bottom: 32px solid transparent;
  border-left: 16px solid transparent;
}

.breadcrumbs a:before {
  margin-left: 3px;
  border-left-color: #000;
}

.breadcrumbs a:after {
  border-left-color: #fff;
}

.breadcrumbs a:hover:after {
  border-left-color: hsl(184,65%,49%);
}

.breadcrumbs li:last-child a:before,
.breadcrumbs li:last-child a:after {
  display: none;
}

@media (max-width: 720px) {
  .breadcrumbs a {
    padding: 15px;
  }

  .breadcrumbs a:before,
  .breadcrumbs a:after {
    border-top-width: 26px;
    border-bottom-width: 26px;
    border-left-width: 13px;
  }
}
@media (max-width: 620px) {
  .breadcrumbs a {
    padding: 10px;
    font-size: 12px;
  }

  .breadcrumbs a:before,
  .breadcrumbs a:after {
    border-top-width: 22px;
    border-bottom-width: 22px;
    border-left-width: 11px;
  }
}
@media (max-width: 520px) {
  .breadcrumbs a {
    padding: 5px;
  }

  .breadcrumbs a:before,
  .breadcrumbs a:after {
    border-top-width: 16px;
    border-bottom-width: 16px;
    border-left-width: 8px;
  }

  .breadcrumbs li a span:first-child {
    display: block;
    margin: 0 auto;
  }

  .breadcrumbs li a span:last-child {
    display: none;
  }
}
＆＃13; 
<html lang="en" class="no-js">
<body>
  	<div class='breadcrumbs'>
	  <div class='inner'>
		<ul class='cf'>
		  <li>
			<a>
			  <span>1</span>
			  <span>111</span>
			</a>
		  </li>
		  <li>
			<a class='active'>
			  <span>2</span>
			  <span>222</span>
			</a>
		  </li>
		  <li>
			<a>
			  <span>3</span>
			  <span>333</span>
			</a>
		  </li>
		</ul>
	  </div>
	</div>

</body>
  <html/>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

我会用旋转的方块来构建它。此外，您实际上并不需要before和after。一个伪元素应该可以。

这样您还可以为弯曲箭头设置border-radius。

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    background: hsl(184,65%,49%);
    font-family: 'Lato';
    color: #000;
    font: 15px/1.4em;
	margin:0;
	padding:0;
}


ul {
  list-style: none;
}

.cf:before, .cf:after {
  content: ' ';
  display: table;
}
.cf:after {
  clear: both;
}
 
.inner {
  margin: 0 auto;
}

.breadcrumbs {
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  background-color: #fff;
}

.breadcrumbs ul {
  border-left: 3px solid #000;
  border-right: 3px solid #000;
  overflow: hidden;
}

.breadcrumbs li {
  float: left;
  width: 33.3333333%;
}

.breadcrumbs a {
  font-family: 'Lato';
  position: relative;
  display: block;
  padding: 20px;
  padding-right: 0 !important;
  /* important overrides media queries */
  font-size: 1vw;
  font-weight: bold;
  text-align: center;
  color: #000;
  cursor: pointer;
}

.breadcrumbs a:hover, .breadcrumbs a:hover:after {
  background: hsl(184,65%,49%);
}

.breadcrumbs a span:first-child {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 18px;
  margin-right: 5px;
  border: 2px solid #aaa;
  border-radius: 50%;
  background-color: #fff;
}

.breadcrumbs a:after {
  content: '';
  position: absolute;
  top: 50%;
  right: -26px;
  width: 52px;
  height: 52px;
  transform: translate(0%, -50%) rotate(45deg);
  z-index: 1;
  background: #fff;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
}

.breadcrumbs li:last-child a:before,
.breadcrumbs li:last-child a:after {
  display: none;
}

@media (max-width: 720px) {
  .breadcrumbs a {
    padding: 15px;
  }
}
@media (max-width: 620px) {
  .breadcrumbs a {
    padding: 10px;
    font-size: 12px;
  }
}
@media (max-width: 520px) {
  .breadcrumbs a {
    padding: 5px;
  }

  .breadcrumbs li a span:first-child {
    display: block;
    margin: 0 auto;
  }

  .breadcrumbs li a span:last-child {
    display: none;
  }
}
<html lang="en" class="no-js">
<body>
  	<div class='breadcrumbs'>
	  <div class='inner'>
		<ul class='cf'>
		  <li>
			<a>
			  <span>1</span>
			  <span>111</span>
			</a>
		  </li>
		  <li>
			<a class='active'>
			  <span>2</span>
			  <span>222</span>
			</a>
		  </li>
		  <li>
			<a>
			  <span>3</span>
			  <span>333</span>
			</a>
		  </li>
		</ul>
	  </div>
	</div>

</body>
  <html/>

相关问题
最新问题