垂直梯度線或無序列表的形狀

我試圖把一個垂直形狀與應用。 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

垂直梯度線或無序列表的形狀

回答

相關問題