使用css创建描边帧效果

Question

我有一个具有这种效果的设计

我不关心字体样式或任何细节，我现在关注的是创建框架，如果可能的话还有按钮。有谁知道怎么做这种效果在css？

这是我非常基本的html / css代码，甚至没有任何帮助。如果它更适合你，你可以完全修改它。顺便说一句，我正在使用bootstrap 3。

/******** The html *********/
    <div class="col-md-12 bg-img">
        <div>Italy has never been so close</div>
    </div>

/******** The css *********/
    .bg-img {
      display: table;
      width: 100%;
      height: 100px;
      text-align: center;
      background: #999 url("http://p1.pichost.me/i/15/1380265.jpg") no-repeat fixed center;
    }

    .bg-img div {
      display: table-cell;
      vertical-align: middle;
    width:10px;
      font-weight:700;
    }

我使用的是通用图片，因为它不应该有任何区别。这是小提琴。 https://jsfiddle.net/3aL4xnr8/

Answer 1

您可以使用:after和:before伪元素执行此操作。

div {
  display: table;
  margin: 0 auto;
  width: 30%;
  padding: 20px;
  position: relative;
  height: 200px;
}

p {
  display: table-cell;
  vertical-align: middle;
  font-size: 40px;
}

div:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  border-top: 1px solid black;
  border-left: 1px solid black;
}

div:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 50%;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

button {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

<div>
  <p>Lorem ipsum dolor sit amet.</p>
  <button>Button</button>
</div>