如何爲響應元素創建重複邊框？

Question

我想創造什麼：

• 一個虛線邊框它們之間的點和邊緣的每一li - 元素
• 大小的頂部可以通過調整CSS或使用的圖像/ SVG改變）
• 的ul的寬度是有求必應，所以邊框的寬度變化，也調整視口，這意味着只有充分cirlces應該是可見的，當
• 點不應該被剪切/截斷

tl; dr：我不想讓這個發生（看到最後一個點？）調整視口時：

• 重複背景圖像
• 一個巨大的（很長）的背景圖像
：



我不能想辦法用這個來創建

• border-image

我得到了：

我想出了一種方法來解決它，但它真的很煩人。它的工作原理，但我不得不生成數百（不必要的）span -elements，因爲我不知道元素的最大寬度。

這個想法很簡單：不合適的點，浮動到隱藏的溢出。

來源

HTML

<ul> 
    <li> 
    <div> 
     <span></span><span></span><span></span><span></span><span></span><span></span> 
    </div> 
    Item 1 
    </li> 
    <li> 
    <div> 
     <span></span><span></span><span></span><span></span><span></span><span></span> 
    </div> 
    Item 2 
    </li> 
</ul> 

CSS

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    line-height: 60px; 
} 

ul > li div { 
    overflow: hidden; 
    height: 2px; 
} 

ul > li div span { 
    float: left; 
    width: 2px; 
    height: 2px; 
    margin: 0 4px 0 0; 
    background: grey; 
} 

的jsfiddle

You can try it here

有沒有辦法解決這個問題，喜歡用一些漂亮的SVG-或梯度招一個優雅的方式是什麼？

Answer 1

border-image似乎是要走到我身邊的路。您可以控制尺寸，並指定重複四捨五入到所需的寬度。

li { 
 
    font-size: 40px; 
 
} 
 

 
.small { 
 
    border: solid transparent; 
 
    border-width: 15px 0 0; 
 
    border-image:url("https://mdn.mozillademos.org/files/4127/border.png") 27 27 round; 
 
} 
 

 
.large { 
 
    border: solid transparent; 
 
    border-width: 30px 0 0; 
 
    border-image:url("https://mdn.mozillademos.org/files/4127/border.png") 27 27 round; 
 
}

<ul> 
 
    <li class="small">First list item</li> 
 
    <li class="large">Second list item</li> 
 
</ul>

我已經使用了菱形形態PNG從MDN網站在這裏，但你應該能夠與你想要的網點形狀創建一個PNG（或SVG）很輕鬆了。

Answer 2

簡單和直接用瀏覽器的其他測試，並回到我 [測試火狐鉻歌劇和IE 11]。要檢查它使用它在全屏和調整瀏覽器

圓形：圖像拼貼填充區域，並在必要時重新縮放以避免分割拼貼。

li { 
 
    padding: 5px; 
 
    border-style: dotted; 
 
    border-color: rgba(213, 126, 0, 1); 
 
    list-style: none; 
 
    border-width: 15px; 
 
    border-image: url("http://f.cl.ly/items/0V28170w0f0k3t3S2p0g/dots.svg") 33% round; 
 
    border-bottom: 0; 
 
    border-left: 0; 
 
    border-right: 0; 
 
}

<ul> 
 
    <li>First Element</li> 
 
    <li>second Element</li> 
 
    <li>third Element</li> 
 
</ul>

Answer 3

下面是使用SVG的例子：

function getCenterDotPosition(position, dotWidth) { 
 
    return (dotWidth/2) + (position) * dotWidth * 2; 
 
} 
 
function getRightPosition(position, dotWidth) { 
 
    return getCenterDotPosition(position, dotWidth) + dotWidth/2; 
 
} 
 

 
function getSVG(options) { 
 
    var width = options.width; 
 
    var height = options.dotWidth; 
 
    var svg = '<svg class="top-dot" width="' + width + 'px" height="' + height + 'px">'; 
 
    var left; 
 
    var radius = options.dotWidth/2; 
 
    var i = 0; 
 
    var right = getRightPosition(i, options.dotWidth); 
 
    while(right < width) { 
 
    center = getCenterDotPosition(i, options.dotWidth); 
 
    svg += '<circle cx="' + center + '" cy="' + radius + '" r="' + radius + '" stroke="none" stroke-width="0" fill="' + options.color + '" />'; 
 
    i++; 
 
    right = getRightPosition(i, options.dotWidth); 
 
    } 
 
    svg += '</svg>'; 
 
    return svg; 
 
} 
 

 
function generateDots() { 
 
    var options = { 
 
    width : $('ul').first().innerWidth(), 
 
    dotWidth : 2, 
 
    color : 'grey' 
 
    }; 
 
    var svg = getSVG(options); 
 
    $('li svg.top-dot').remove() 
 
    $('li').prepend(svg); 
 
} 
 

 

 
generateDots(); 
 
$(window).resize(function() { 
 
    generateDots(); 
 
});

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    line-height: 60px; 
 
    width: 50%; 
 
} 
 

 
svg.top-dot { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
</ul>

Answer 4

我簡單地添加每個<ul>上方的<hr/>標籤。
這是你之後的事情嗎？

<div> 
    <hr/> 
    <ul> 
    <li>Item 1</li> 
    </ul> 
    <hr/> 
    <ul> 
    <li>Item 2</li> 
    </ul> 
</div> 



hr{ 
    width:100%; 
    color:#333; 
    border-top: dotted 3px; 
} 

ul > li div span { 
    float: left; 
    width: 2px; 
    height: 2px; 
    margin: 0 4px 0 0; 
    background: grey; 
} 

Answer 5

li { 
 
    font-size: 40px; 
 
} 
 

 
.small { 
 
    border: solid transparent; 
 
    border-width: 15px 0 0; 
 
    border-image:url("http://i.stack.imgur.com/Esozt.jpg") 30 30 round; 
 
} 
 

 
.large { 
 
    border: solid transparent; 
 
    border-width: 30px 0 0; 
 
    border-image:url("http://i.stack.imgur.com/Esozt.jpg") 30 30 round; 
 
}

<ul> 
 
    <li class="small">1st list item</li> 
 
    <li class="large">2n list item</li> 
 
    <li class="small">3rd list item</li> 
 
</ul>