Question

我使用div是因为我不想给整个边框着色，而是给外部角着色，它可以工作，但是现在我要做的是在四个角的中心添加文本/链接。

如果我要这样做，文本在每个角处保持四倍，甚至改变div角的位置。

有更好的方法吗？

这看起来很简单，但是我已经有好几天了，这是我的代码片段：

html,
body {
  color: #fff;
  background: #000;
  width: 100%;
}

.wholeDivDom {
  margin: 0.7%;
}

.outer {
  width: 350px;
  height: 120px;
  background: black;
  position: relative;
}

div:before,
div:after {
  content: "";
  position: absolute;
  height: 20%;
  width: 10%;
}

.outer:after {
  content: "";
  right: 0;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.outer:before {
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
}

.inner:before {
  bottom: 0;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

.inner:after {
  bottom: 0;
  right: 0;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

<body >
  <header>
    <div class="wholeDivDom">
      <div class="outer">
        <div class="inner">
        </div>
      </div>
    </div>
  </header>
</body>

Answer 1

只需使用span标记即可添加您的文本并将position: absolute应用于文本。然后给left:50%和top:50%加上transform: translate(-50%,-50%);应该可以解决问题。

html,
body {
  color: #fff;
  background: #000;
  width: 100%;
}

.wholeDivDom {
  margin: 0.7%;
}

.outer {
  width: 350px;
  height: 120px;
  background: black;
  position: relative;
}

div:before,
div:after {
  content: "";
  position: absolute;
  height: 20%;
  width: 10%;
}

.outer:after {
  content: "Hello";
  right: 0;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.outer:before {
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
}

span {
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
}

.inner:before {
  bottom: 0;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

.inner:after {
  bottom: 0;
  right: 0;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

<body >
  <header>
    <div class="wholeDivDom">
      <div class="outer">
        <div class="inner">
            <span>Text goes here</span>
        </div>
      </div>
    </div>
  </header>
</body>

HTML-在div容器中插入文本

1 个答案: