我在桌面上创建了一个带有左右箭头的 CSS 步骤。在移动设备上,我希望它看起来像这样:
这是我到目前为止所拥有的:https :
//jsfiddle.net/06u3bm72/
如您所见,我想在每个列表项上创建全宽顶部箭头,以便创建三角形,就像设计一样。有没有办法保持我当前的标记并实现这一目标?
我的代码是:
.breadcrumbs-two {
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumbs-two {
overflow: hidden;
width: 100%;
}
.breadcrumbs-two li {
float: left;
width: 18.3%;
}
.breadcrumbs-two a {
text-transform: uppercase;
float: left;
text-decoration: none;
color: #FFF;
position: relative;
text-align: center;
width: 100%;
height: 80px;
line-height: 1.3;
font-size: 15px;
}
.breadcrumbs-two a span {
display: inline-block;
max-width: 100%;
width: 150px;
margin: auto;
position: relative;
top: 20px;
}
.breadcrumbs-two a::before {
content: "";
position: absolute;
top: 50%;
margin-top: -40px;
border-width: 40px 0 40px 30px;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -30px;
}
.breadcrumbs-two a::after {
content: "";
position: absolute;
top: 50%;
margin-top: -40px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 30px solid #ddd;
right: -30px;
}
.bread1 a {
background-color: #8ac43c;
}
.bread1 a::before {
border-color: #8ac43c #8ac43c #8ac43c transparent;
}
.bread1 a::after {
border-color: transparent #8ac43c transparent #8ac43c;
}
.bread2 a {
background-color: #69aa4e;
}
.bread2 a::before {
border-color: #69aa4e #69aa4e #69aa4e transparent;
}
.bread2 a::after {
border-color: transparent #69aa4e transparent #69aa4e;
}
.bread3 a {
background-color: #448e60;
}
.bread3 a::before {
border-color: #448e60 #448e60 #448e60 transparent;
}
.bread3 a::after {
border-color: transparent #448e60 transparent #448e60;
}
.bread4 a {
background-color: #1f7171;
}
.bread4 a::before {
border-color: #1f7171 #1f7171 #1f7171 transparent;
}
.bread4 a::after {
border-color: transparent #1f7171 transparent #1f7171;
}
.bread5 a {
background-color: #005581;
}
.bread5 a::before {
border-color: #005581 #005581 #005581 transparent;
}
.bread5 a::after {
border-color: transparent #005581 transparent #005581;
}
@media screen and (max-width: 991px) {
.breadcrumbs-two li {
float: none;
width: 100%;
}
.breadcrumbs-two a {
width: 100%;
}
li.bread1 {
margin-left: 0;
}
.breadcrumbs-two a {
padding-top: 0;
background-clip: content-box;
overflow: hidden;
}
.breadcrumbs-two a::before {
content: "";
position: absolute;
top: 50%;
margin-top: -40px;
border-width: 40px 0 40px 20px;
border-width: 40px 0px 0px 40px;
border-style: solid;
left: 50%;
width: 100%;
left: 0;
border: 0;
z-index: 10;
height: 10px;
top: 0;
margin: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 20px auto 0 auto;
border-color: #007bff transparent transparent transparent;
display: none;
}
.breadcrumbs-two a::after {
content: "";
position: absolute;
top: 50%;
margin-top: -40px;
right: -20px;
display: none;
}
}
<ul class="breadcrumbs-two">
<li class="bread1"><a><span><strong>Discovery</strong> and sales audit</span></a></li>
<li class="bread2"><a><span>Priorities and <strong>Action Plan</strong></span></a></li>
<li class="bread3"><a><span>Workshops and <strong>Collaborations</strong></span></a></li>
<li class="bread4"><a><span><strong>Execute</strong> and <strong>Implement</strong></span></a></li>
<li class="bread5"><a><span><strong>Results</strong> and <strong>Adoption</strong></span></a></li>
</ul>
您可以使用前后伪元素和透明颜色的边框来实现。
这是一个如何做的例子,这可以更好地优化,但我认为它可以作为指导。
https://codepen.io/itscarlosisaac/pen/MOQOZO
.breadcrumbs-two{
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumbs-two{
overflow: hidden;
width: 100%;
}
.breadcrumbs-two li{
float: left;
width: 18.3%;
}
.breadcrumbs-two a{
text-transform: uppercase;
float: left;
text-decoration: none;
color: #FFF;
position: relative;
text-align: center;
width: 100%;
height: 80px;
line-height: 1.3;
font-size: 15px;
}
.breadcrumbs-two a span {
display: inline-block;
max-width: 100%;
width: 150px;
margin: auto;
position: relative;
top: 20px;
}
.breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -40px;
border-width: 40px 0 40px 30px;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -30px;
}
.breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -40px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 30px solid #ddd;
right: -30px;
}
.bread1 a {
background-color: #8ac43c;
}
.bread1 a::before {
border-color: #8ac43c #8ac43c #8ac43c transparent;
}
.bread1 a::after {
border-color: transparent #8ac43c transparent #8ac43c;
}
.bread2 a {
background-color: #69aa4e;
}
.bread2 a::before {
border-color: #69aa4e #69aa4e #69aa4e transparent;
}
.bread2 a::after {
border-color: transparent #69aa4e transparent #69aa4e;
}
.bread3 a {
background-color: #448e60;
}
.bread3 a::before {
border-color: #448e60 #448e60 #448e60 transparent;
}
.bread3 a::after {
border-color: transparent #448e60 transparent #448e60;
}
.bread4 a {
background-color: #1f7171;
}
.bread4 a::before {
border-color: #1f7171 #1f7171 #1f7171 transparent;
}
.bread4 a::after {
border-color: transparent #1f7171 transparent #1f7171;
}
.bread5 a {
background-color: #005581;
}
.bread5 a::before {
border-color: #005581 #005581 #005581 transparent;
}
.bread5 a::after {
border-color: transparent #005581 transparent #005581;
}
@media screen and (max-width: 991px) {
.breadcrumbs-two{
overflow-x:hidden;
overflow-y:visible;
padding-bottom:40px;
}
.breadcrumbs-two a span{ top:45px; }
.breadcrumbs-two li {
float: none;
width: 100vw;
height: 80px;
position:relative;
display:block;
overflow:visible;
}
.breadcrumbs-two li:first-child:before{
content:'';
display:block;
width: 100vw;
height:30px;
position:absolute;
top:0;
left:0;
right:0;
margin:auto;
border-top:30px solid white;
border-left:50vw solid transparent;
border-right:50vw solid transparent;
box-sizing:border-box;
z-index:1;
}
.breadcrumbs-two li:after{
content:'';
display:block;
width: 100vw;
height:30px;
position:absolute;
bottom:-30px;
left:0;
right:0;
margin:auto;
border-left:50vw solid transparent;
border-right:50vw solid transparent;
box-sizing:border-box;
}
.breadcrumbs-two a {
width: 100%;
}
li.bread1 {
z-index:10;
}
li.bread2 {
z-index:9;
}
li.bread3 {
z-index:8;
}
li.bread4 {
z-index:7;
}
li.bread5 {
z-index:6;
}
li.bread1:after{
border-top:30px solid #8ac43c;
}
li.bread2:after{
border-top:30px solid #69aa4e;
}
li.bread3:after{
border-top:30px solid #448e60;
}
li.bread4:after{
border-top:30px solid #1f7171;
}
li.bread5:after{
border-top:30px solid #005581;
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句