CSS - 风格边界领导者

Question

有没有办法设置边框样式以启动与领导者的CSS边框并在宽度上完成百分比。

基本上我需要建立一个以下的响应版本（理想情况下哪个也适用于ie8 ）

因此边界以正方形开始/结束并完成底部的60％

它需要垂直响应，理想情况下也要水平响应。我唯一的想法是使用图像和边框的组合 - 所以底部边框有一个白色背景图像在广场结束，边界线通过它运行？认为必须有更好的方法来做到这一点吗？

任何想法！？

Answer 1

我非常怀疑这是IE兼容 - 特别是回到8，但这是一个有趣的练习，也许它会给你一些想法。的 DEMO

基本策略是使用:before和:after伪元素来定位子弹，在:after元素的情况下，用来掩盖容器的一部分＆＃39 ; s底部边界。

<强> 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/