html - 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;
}