1
と国境を接し、私はウェブサイト上のパンくずを使用していますが、今私は1pxから3pxに境界線の半径を変更することを確認します。
問題は、垂直Vの外観を滑らかにする方法が見つからないということです。
現在のビューは左側にあります。右の理想的な：
SNIPPET
/* 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;
\t margin:0;
\t 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;
}
}<html lang="en" class="no-js">
<body>
\t <div class='breadcrumbs'>
\t <div class='inner'>
\t \t <ul class='cf'>
\t \t <li>
\t \t \t <a>
\t \t \t <span>1</span>
\t \t \t <span>111</span>
\t \t \t </a>
\t \t </li>
\t \t <li>
\t \t \t <a class='active'>
\t \t \t <span>2</span>
\t \t \t <span>222</span>
\t \t \t </a>
\t \t </li>
\t \t <li>
\t \t \t <a>
\t \t \t <span>3</span>
\t \t \t <span>333</span>
\t \t \t </a>
\t \t </li>
\t \t </ul>
\t </div>
\t </div>
</body>
<html/>
それはあなたのスクリーンであるかもしれません。スニペットは私のためにうまくレンダリングします。私はVと緑色の背景を並べることをお勧めします。 – amflare
あなたは国境の白い斑点を心配していますか？私はあなたの問題を理解していません。 –
@ChrisHappyはい。そこには縁がありません。 –