-4
A
답변
1
이 여기에 코드
.breadcrumb li{
display:inline-block;
padding:10px 15px;
position: relative; \t
\t border: 1px solid #ccc;
margin-left:-4px;
background: #eee;
}
.breadcrumb li:first-child{
background: #054EA3;
}
.breadcrumb li a{
padding-left: 15px;
color:#888;
text-decoration:none;
}
.breadcrumb li:first-child a{
color:#fff;
}
.breadcrumb li:after, .breadcrumb li:before {
\t left: 100%;
\t top: 50%;
\t border: 2px solid transparent;
\t content: " ";
\t height: 0;
\t width: 0;
\t position: absolute;
\t pointer-events: none;
}
.breadcrumb li:after {
\t border-color: rgba(136, 183, 213, 0);
\t border-left-color: #eee;
\t border-width: 20px;
\t margin-top: -20px;
z-index:99999;
}
.breadcrumb li:first-child:after {
\t border-left-color: #054EA3;
}
.breadcrumb li:before {
\t border-color: rgba(194, 225, 245, 0);
\t border-left-color: #ccc;
\t border-width: 21px;
\t margin-top: -21px;
z-index:99999;
}
<ul class="breadcrumb">
<li><a href="#">SEARCH</a></li>
<li><a href="#">MEET</a></li>
<li><a href="#">DISCUSS</a></li>
<li><a href="#">MANAGE</a></li>
</ul>
1
이 내가 어떻게 할 것입니다라고 할 캔트. 응답하기 위해 일부 @media
쿼리를 추가하십시오.
.breadcrumbs {
position: relative;
display: inline-block;
vertical-align: middle;
border: 1px solid #ccc;
overflow: hidden;
}
.breadcrumb {
padding: 9px 12px 9px 24px;
position: relative;
float: left;
background-color: #f1f1f1;
display: inline-block;
margin-bottom: 0;
text-align: center;
border: 1px solid transparent;
color: #333;
text-transform: uppercase;
font: 12px sans-serif;
text-decoration: none;
font-weight: 700;
}
.breadcrumb:first-child {
padding: 9px 12px 9px 18px !important;
}
.breadcrumbs .breadcrumb:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #ccc;
position: absolute;
top: 50%;
margin-top: -20px;
margin-left: 1px;
left: 101%;
z-index: 3;
}
.breadcrumbs .breadcrumb:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #f1f1f1;
position: absolute;
top: 50%;
margin-top: -20px;
left: 101%;
z-index: 3;
}
.breadcrumb.active,
.breadcrumb:hover {
padding: 9px 12px 9px 24px;
position: relative;
float: left;
background-color: #3f51b5;
display: inline-block;
margin-bottom: 0;
text-align: center;
border: 1px solid transparent;
color: #fff;
text-transform: uppercase;
font: 12px sans-serif;
text-decoration: none;
font-weight: 700;
}
.breadcrumbs .breadcrumb .active:before,
.breadcrumbs .breadcrumb:hover:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #3f51b5;
position: absolute;
top: 50%;
margin-top: -20px;
margin-left: 1px;
left: 100%;
z-index: 4;
}
.breadcrumbs .breadcrumb.active:after,
.breadcrumbs .breadcrumb:hover:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #3f51b5;
position: absolute;
top: 50%;
margin-top: -20px;
left: 100%;
z-index: 4;
}
<div class="breadcrumbs">
<a href="#" class="active breadcrumb">Search</a>
<a href="#" class="breadcrumb">Meet</a>
<a href="#" class="breadcrumb">Discuss</a>
<a href="#" class="breadcrumb">Manage</a>
</div>
없음 자신을 시도하지? – Pedram
한 번 시도한 다음 몇 군데 붙어 있다면 우리는 당신을 도울 것입니다. 이것은 질문하는 것이 옳지 않은 방법입니다. – ram
HTML 코드를 작성하지 않으면 PhotoShop에서 가져올 수 없습니다. 하지만 [InkScape] (https://inkscape.org/en/)를 사용하여 얻을 수 있습니다. PhotoShop과 마찬가지로 '.html'파일로 저장하면됩니다. –