CSS - 樣式化的邊框領導

Question

有沒有一種方法來設置邊框的樣式來啓動與領導的CSS邊框，並通過寬度完成百分比。

基本上我需要建立以下一個負責任的版本（理想這將在IE8的工作還）

所以邊界開始用方形/結束，結束的方式60％通過底部部分

它需要垂直響應並且理想地水平地響應。我唯一的想法是使用圖像和邊框的組合 - 所以底部的邊框有一個白色的背景圖像在廣場上結束，邊界線穿過它？想到那裏一定有更好的方法來做到這一點？

有什麼想法！？

Answer 1

我很懷疑這是IE瀏覽器兼容 - 尤其是回到8，但這是一個有趣的練習，也許它會給你一些想法。 DEMO

的基本策略是使用:before和:after僞元素來定位你的子彈，並在:after元素的情況下，掩蓋了容器的下邊框的一部分。

HTML

<div class="container"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a euismod libero. Fusce tincidunt, urna id pulvinar consectetur, nibh lacus faucibus risus, nec varius nisi dolor in sem. Etiam et elementum ligula, sed porta nisl. Sed luctus maximus tortor, in malesuada felis pharetra eu. Donec ultrices urna ultrices lectus venenatis egestas. Suspendisse nec orci vestibulum, ullamcorper dolor sit amet, pulvinar risus. Integer semper hendrerit mi at sodales.</p> 
    <a href="#">Find out more</a> 
</div> 

CSS

html { 
    font-size: 100%; 
} 

* { 
    box-sizing: border-box; 
} 

body { 
    width: 80%; 
    margin: auto; 
    background: #fff; 
} 

.container { 
    position: relative; 
    margin: 1rem; 
    padding: 1rem 1rem 1rem 0; 
    border-top: .15rem solid #ccc; 
    border-right: .15rem solid #ccc; 
    border-bottom: .15rem solid #ccc; 
    font-size: 1rem; 
    font-style: italic; 
    line-height: 1rem; 
    text-align: right; 
} 

.container:after, 
.container:before { 
    content: '■'; 
    color: #ccc; 
    font-size: 1.5rem; 
    line-height: 1rem; 
    position: absolute; 
} 

.container:before { 
    top: -.55rem; 
    left: -.5rem; 
} 

.container:after { 
    background: #fff; 
    left: 0; 
    bottom: -.55rem; 
    right: 60%; 
} 

.container p { 
    text-align: left; 
} 

.container a { 
    color: #ee0; 
} 

Answer 2

嗯，這裏是一個哈克的方式：

HTML：

<div class="top"><div class="square"></div></div> 
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
<div class="square"></div><div class="bottom"></div> 

CSS：

.square { 
    display: inline-block; 
    width: 9px; 
    height: 9px; 
    background-color: #999; 
    margin-left: 40%; 
    margin-right: -10px; 
    vertical-align: top; 
} 

.top { 
    height: 4px; 
    border-top: 1px solid #999; 
    border-right: 1px solid #999; 
    vertical-align: top; 
} 

.top .square { 
    margin: -5px 0 0 0; 
} 

.content { 
    border-right: 1px solid #999; 
    padding: 15px 10px; 
} 

.bottom { 
    display: inline-block; 
    height: 4px; 
    border-bottom: 1px solid #999; 
    border-right: 1px solid #999; 
    width: 60%; 
    vertical-align: top; 
} 

http://jsfiddle.net/ohxe3ck6/1/