垂直梯度线或无序列表的形状

我试图把一个垂直形状与应用。 50px高度和15px宽度，在记分牌的前两个数字前面。我曾尝试在CSS中的跨度和宽度/高度，但它并没有渲染，如果我尝试用“|”它一直推动其他项目出中心。有没有把这样的形状，可以定制成梯度后的前两个数字前面一种方式，同时保留表行，头像，名字的形状/填充/保证金很好地把一个接一个的下？垂直梯度线或无序列表的形状

所以，我要实现的是这样的：http://sketchtoy.com/67287993

但是，只有最初的2-3项就行了，别人会只停留在与化身和其他数据的一个下其他的确切顺序。

Codepen：http://codepen.io/anon/pen/GqdjRd?editors=1100

HTML：

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> 

<body> 
    <div class="container"> 


    <div class="col-md-6 right__column"> 
     <ul id="table" class="tableList"> 
     <p class="tableHeader">Scoreboard</p> 
     <br> 
     <h5 class="tableHeader__user">results</h5> 
     <hr class="line"> 
     <li><span class="gradient">| </span><span class="numbers">1.</span> <img src="http://placekitten.com/50/50" alt="user" class="avatar"><span class="name"> John Doe</span><span class="numbers__points pull-right">10 points</span> </li> 
     <hr class="line"> 
     <li><span class="numbers">2.</span> <img src="http://placekitten.com/50/50" alt="user" class="avatar"><span class="name"> John Doe</span><span class="numbers__points pull-right">9 points</span> </li> 
     <hr class="line"> 
     <li><span class="numbers">3.</span> <img src="http://placekitten.com/50/50" alt="user" class="avatar"><span class="name"> John Doe</span><span class="numbers__points pull-right">8 points</span> </li> 
     <hr class="line"> 
     <li><span class="numbers">4.</span> <img src="http://placekitten.com/50/50" alt="user" class="avatar"><span class="name"> John Doe</span><span class="numbers__points pull-right">7 points</span> </li> 
     <hr class="line"> 
     <li><span class="numbers">5.</span> <img src="http://placekitten.com/50/50" alt="user" class="avatar"><span class="name"> John Doe</span><span class="numbers__points pull-right">6 points</span> </li> 
     <hr class="line"> 
     <li><span class="numbers">6.</span> <img src="http://placekitten.com/50/50" alt="user" class="avatar"><span class="name"> John Doe</span><span class="numbers__points pull-right">7 points</span> </li> 
     <hr class="line"> 
     <li><span class="numbers">7.</span> <img src="http://placekitten.com/50/50" alt="user" class="avatar"><span class="name"> John Doe</span><span class="numbers__points pull-right">6 points</span> </li> 
     <hr class="line line__margin"> 
     <li class="dots text-center"><span>&bull;&bull;&bull;</span></li> 
     <hr class="line line__margin--bottom"> 
     <li><span class="numbers">100.</span> <img src="http://placekitten.com/50/50" alt="user" class="avatar"><span class="name"> John Doe</span><span class="numbers__points pull-right">5 points</span> </li> 
     </ul> 
    </div> 
    </div>

CSS：

.right__column { 
    background-color: grey; 
    padding: 0px; 
    padding-right: 36px; 
} 

.tableHeader { 
    font-size: 160%; 
    margin-top: 30px; 
    margin-bottom: -10px; 
    font-weight: 700; 
    letter-spacing: -1px; 
    color: white; 
} 

.tableHeader__user { 
    color: white; 
    font-size: 110%; 
} 

.name { 
    color: blue; 
    font-size: 120%; 
} 

.tableHeader__points { 
    color: red; 
} 

li { 
    list-style-type: none; 
    padding: 1px; 
} 

.dots { 
    font-size: 280%; 
    letter-spacing: 2px; 
    color: red; 
} 

.line { 
    color: blue; 
    border-color: -moz-use-text-color -moz-use-text-color; 
} 

.line__margin { 
    margin-bottom: -6%; 
} 

.line__margin--bottom { 
    margin-top: -4%; 
} 

.numbers { 
    color: white; 
    font-size: 130%; 
    font-weight: bold; 
    width: 40px; 
    display: inline-block; 
    text-align: left; 
} 

.avatar { 
    margin-right: 10px; 
    margin-left: 10px; 
} 

.numbers__points { 
    color: white; 
    padding: 10px; 
    font-size: 125%; 
    font-weight: bold; 
} 

.gradient { 
    color: yellow; 
    height: 50px; 
    width: 15px; 
}

来源

2016-07-23 Joe

您可以使用渐变来绘制这样的事情，甚至使用更少的和有效的标记。

例如

* { 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
} 
 
.right__column { 
 
    background-color: grey; 
 
    padding: 0 0 1em 36px;/* set your own */ 
 
    color:white; 
 
    letter-spacing: -1px; 
 
} 
 
ol { 
 
    border-bottom:1px solid blue; 
 
    margin: 0 36px 0 0;/* set your own */ 
 
    padding:0; 
 
    font-size:20px; 
 
} 
 
li { 
 
    border-top: 1px solid blue; 
 
    padding-top:1em;/* set your own */ 
 
    margin-bottom:1em;/* set your own */ 
 
    list-style-position:inside; 
 
    padding-left:20px; 
 
    background:linear-gradient(blue,white) no-repeat bottom left;/* set your own */ 
 
    background-size:15px calc(100% - 1em);/* set your own */ 
 
} 
 
li img, li span { 
 
    vertical-align:middle; 
 
    margin:0 0 0 0.5em; 
 
    color:blue; 
 
} 
 
.numbers__points { 
 
    color:inherit; 
 
    line-height:50px;/* because image is 50px tall */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> 
 
<div class="container"> 
 
    <div class="col-md-6 right__column"> 
 
    <h1>scoreboards</h1><!-- title is not paragraph ;) --> 
 
    <h2>results</h2><!-- 2 follows 1 --> 
 
    <ol> 
 
     <li> 
 
     <img src="http://placekitten.com/50/50" alt="user" class="avatar"> 
 
     <span class="name"> John Doe</span> 
 
     <span class="numbers__points pull-right">10 points</span> 
 
     </li> 
 
     <li> 
 
     <img src="http://placekitten.com/50/50" alt="user" class="avatar"> 
 
     <span class="name"> John Doe</span> 
 
     <span class="numbers__points pull-right">10 points</span> 
 
     </li> 
 
     <li> 
 
     <img src="http://placekitten.com/50/50" alt="user" class="avatar"> 
 
     <span class="name"> John Doe</span> 
 
     <span class="numbers__points pull-right">10 points</span> 
 
     </li> 
 
     <li> 
 
     <img src="http://placekitten.com/50/50" alt="user" class="avatar"> 
 
     <span class="name"> John Doe</span> 
 
     <span class="numbers__points pull-right">10 points</span> 
 
     </li> 
 
     <li> 
 
     <img src="http://placekitten.com/50/50" alt="user" class="avatar"> 
 
     <span class="name"> John Doe</span> 
 
     <span class="numbers__points pull-right">10 points</span> 
 
     </li> 
 
    </ol> 
 
    </div>

来源

2016-07-23 22:11:44

您需要使用CSS边界，而不是|字符和小时内的UL。使用CSS :nth-child(n)须藤级选择微升第一和第二孩子的（LI）。

ul#table li { 
    border-top:1px solid #cccccc; 
padding: 10px 10px 10px 20px; 
} 

ul#table li:nth-child(1), ul#table li:nth-child(2){ 
    border-left:15px solid #cccccc; 
    padding-left: 5px 
}

检查这里： http://codepen.io/ramkaldesign/pen/PzZGBg?editors=1100

来源

2016-07-23 20:06:44

谢谢你，这是真的很有趣solution..is它可能是在左边（15像素）边框没有接触上的底线，但里面仍他们没有走得太远？ – Joe

为了实现这一点，我所知道的唯一解决方案是为LI使用垂直图像背景。然后，您需要精确计算LI的高度，并创建比LI高度略小的背景图像。然后将背景位置设置为左侧（水平）和中间（垂直）。 –

是的，我无法弄清楚整天...为了说明，这是我正在努力实现http://sketchtoy.com/67287993 – Joe

垂直梯度线或无序列表的形状

回答

相关问题