基于以前的和相关的问题,你可以尝试以下。
修改你的HTML如下:
有两个部分的CSS:
body {margin: 0;} /* Note: learn about reset style sheets... */
/* The following takes care of the shadow/coloring/arrow styling */
.Right {
position: relative;
width: 80%;
margin-right: 50px;
margin-top: 4%;
}
.Right-after {
content:"";
position:absolute;
top: 0;
width: 0;
border-style: solid;
border-width: 3.3em 0 3.3em 3.3em;
right:-3.2em;
}
.colorV {
color:#dbdcde;
}
.green {
background: linear-gradient(to left, #1d9755, #005b26, #002000);
}
.green-after {
border-color: transparent transparent transparent #1d9755;
}
/* The following takes care of the test clipping */
.table-wrap {
display: table;
width: 100%;
height: 200px; /* this may be optional... */
font-size: 1.00em;
line-height: 1.50em;
font-size: 5.0em;
}
.number-cell {
display: table-cell;
}
.text-cell {
display: table-cell;
}
.inner {
height: 1.50em;
overflow: hidden;
word-break: break-all;
}
在观看演示。
相关.Right和.green的规则照顾绿影和箭头图案的。 这建立了良好定义的块级别的容器。
的div.Right块包含一个子块.table-wrap,其中将包含文本和号码,并将采取是限幅,如图前面:
加法子块,.Right-after生成的箭头主题。