How I can make this with html and css? [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want convert a psd file to html and css and I want to convert it into html and css . But I cant do that

Answer 1

This is how I would do it. Add some #media queries to make it responsive.
.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">
Search
Meet
Discuss
Manage
</div>

Answer 2

Here is the Code
.breadcrumb li{
display:inline-block;
padding:10px 15px;
position: relative;
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 {
left: 100%;
top: 50%;
border: 2px solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.breadcrumb li:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #eee;
border-width: 20px;
margin-top: -20px;
z-index:99999;
}
.breadcrumb li:first-child:after {
border-left-color: #054EA3;
}
.breadcrumb li:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #ccc;
border-width: 21px;
margin-top: -21px;
z-index:99999;
}
<ul class="breadcrumb">
<li>SEARCH</li>
<li>MEET</li>
<li>DISCUSS</li>
<li>MANAGE</li>
</ul>