html css li 一行显示图片,html – css活跃LI的箭头与身体图像背景？

这个CSS代码将修复它：

您需要将边框带到LI并在内容的前后左右两侧进行切割.为了画龙点睛,我还在内容之后为UL带来了边框,让你在页面上保持100％.

body {

background: #1abc9c url(//dmypbau5frl9g.cloudfront.net/assets/homepage/banner--themeforest-342995208860d6c90b98134db089ef84.jpg);

}

ul {

overflow: hidden; /* Clear float and hide ul:after content overflow */

position: relative; /* Relative for ul:after content */

width: 100%;

}

ul:after {

content: "";

border-bottom: 3px solid red;

bottom: 0;

position: absolute; /* Now it will start after the last LI */

width: 100%;

}

li {

float: left;

padding: 20px;

position: relative;

}

li:before,

li:after {

content: "";

border-bottom: 3px solid red;

bottom: 0;

position: absolute;

width: 50%;

}

li:before {

left: 0;

}

li:after {

right: 0;

}

li.active:before,

li.active:after {

width: calc(50% - 8px); /* Transparent part of the arrow */

}

li a {

display: block;

position: relative;

}

li.active a:after {

content: "";

width: 15px;

height: 15px;

position: absolute;

top: 100%;

left: 0;

right: 0;

margin: 12px auto 0;

border: solid red;

border-width: 3px 3px 0;

-moz-transform: rotate(315deg);

-webkit-transform: rotate(315deg);

-ms-transform: rotate(315deg);

}