垂直グラデーションラインまたは順序付けされていないリスト内のシェイプ

私はアプリで垂直なシェイプを入れようとしています。スコアボードの最初の2つの数字の前に、50ピクセルの高さと15ピクセルの幅があります。私はCSSでスパンと幅/高さを試しましたが、レンダリングしません。 "|"を試してみると、他のアイテムを中心から押し出し続けます。後でグラデーションにカスタマイズできる最初の2つの数字の前にシェイプを入れる方法はありますか？テーブル行、アバター、名前の順番を入れ替えてシェイプ/パディング/マージンを維持しますか？垂直グラデーションラインまたは順序付けされていないリスト内のシェイプ

しかし、唯一のリストの最初の2-3の項目のhttp://sketchtoy.com/67287993は、他の人が唯一のアバターやその他のデータを他の下の1と正確な順序に滞在しなければならない：

だから、私はこのような何かを達成したいです。

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：あなたは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

| UL内の文字と時間を表示します。 CSS :nth-child(n) sudo-classを使用してulの1番目と2番目の子（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

これは左（15ピクセル）の境界線が上と一番下の行には触れていないこと、それが可能本当に面白いsolution..isですが、内側に残っていただき、ありがとうございますあまりにも遠くに行くことなくそれらを残した？ – Joe

これを達成するには、私が知っている唯一の解決策は、LIに垂直な画像の背景を使用することです。次に、LIの高さを正確に計算し、LIの高さよりわずかに小さい背景イメージを作成する必要があります。バックグラウンド位置を左（水平）と中（垂直）に設定します。 –

はい、私は一日中それを理解することはできません...説明するために、これは私が達成しようとしているものですhttp://sketchtoy.com/67287993 – Joe

垂直グラデーションラインまたは順序付けされていないリスト内のシェイプ

答えて

関連する問題