垂直渐变线或无序列表中的形状

时间：2016-07-23 19:29:02

标签： html css html-lists

我正在尝试使用app设置垂直形状。记分板中前两个数字前面的50px高度和15px宽度。我已尝试在css中使用span和width / height但它不会渲染，如果我尝试使用＆＃34; | ＆＃34;它不断将其他物品推出中心。有没有办法在前两个数字前面放置一个形状，以后可以自定义为渐变，同时保留表格行的形状/填充/边距，化身，名称很好地将一个放在另一个之下？

所以，我希望实现这样的目标：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;
}

2 个答案:

答案 0 :(得分：1)

你可以使用渐变来绘制这样的东西，甚至使用更少且有效的标记。

例如

* {
  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>

答案 1 :(得分：0)

您需要使用CSS边框，而不是| UL内部的字符和小时。 使用CSS :nth-child(n) sudo-class选择ul。

的第一个和第二个孩子（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

相关问题
最新问题