html实现控件判断挑战跳转,html – 具有突破标签说明的挑战性图表

这是我的尝试.只是想成为语义,尽可能少的额外元素

.container {

width: 400px;

height: 200px;

}

.container * {

display: inline-block;

float: left;

margin: 4px;

position: relative;

}

.item:first-of-type {

margin-left: 200px;

}

.item:before {

content: attr(data-label);

text-align: right;

position: absolute;

right: calc(100% + 10px);

height: 30px;

width: 200px;

}

.item:nth-of-type(1):before {

bottom: -50px;

}

.item:nth-of-type(2):before {

bottom: -80px;

}

.item:nth-of-type(3):before {

bottom: -110px;

}

.item:after {

content: "";

position: absolute;

width: 100%;

left: 0px;

Box-shadow: inset 0px 2px 0px blue;

background-image: linear-gradient(blue,blue),linear-gradient(blue,blue);

background-position: 50% 0%,0% calc(100% - 10px);

background-size: 2px calc(100% - 10px),50% 2px;

background-repeat: no-repeat;

}

.item:nth-of-type(1):after {

top: 30px;

height: 30px;

z-index: -1;

}

.item:nth-of-type(2):after {

top: 30px;

height: 60px;

z-index: -2;

}

.item:nth-of-type(3):after {

top: 30px;

height: 90px;

z-index: -3;

}

FIRST

-

SEC

-

THIRD

另一个例子,好一点,并收缩包装容器.

伪元素不再是绝对定位的,所以容器可以调整大小.并避免一些calc使用,总是比维护比填充更困难.

不过,我仍然需要在手上放置一个填充物.看不到如何避免这个…

.container {

border: solid 1px red;

display: inline-block;

padding-left: 200px;

}

.container * {

display: inline-block;

float: left;

margin: 4px;

position: relative;

}

.item:before {

content: attr(data-label);

text-align: right;

position: absolute;

display: inline-block;

right: 100%;

height: 30px;

width: 200px;

padding-right: 8px;

}

.item:nth-of-type(1):before {

top: 30px;

}

.item:nth-of-type(2):before {

top: 55px;

}

.item:nth-of-type(3):before {

top: 85px;

}

.item:after {

content: "";

display: inline-block;

width: 100%;

left: 0px;

Box-shadow: inset 0px 2px 0px blue;

background-image: linear-gradient(blue,50% 2px;

background-repeat: no-repeat;

}

.item:nth-of-type(1):after {

height: 30px;

}

.item:nth-of-type(2):after {

height: 60px;

}

.item:nth-of-type(3):after {

height: 90px;

}

FIRST

-

SEC

-

THIRD