如何制作方角的东西？

Question

我知道这个问题真的很模糊，但我不知道如何描述它们......基本上，我想要这些：

我正在谈论红色的角落里的东西。实现这一目标的最简单方法是什么？显然，你可以在这些形状中制作单独的div，但我觉得让它们处于你想要的位置，即使所有重新调整尺寸和东西都会很痛苦。这是唯一的方法吗？

Answer 1

这是一种可能有用的方法。添加两个伪元素，一个具有顶部和底部边框，第二个具有特定颜色（白色）的左右边框，使得它们“白化”原始边框（在这种情况下为蓝色）。

这种方法是纯CSS，不涉及额外的标记。

div {
  font-size: 4.00em;
  padding: 40px;
  border: 2px solid blue;
  display: inline-block;
  position: relative;
}
div:after {
  content: '';
  display: block;
  border-left: 2px solid white;
  border-right: 2px solid white;
  position: absolute;
  height: 50%;
  left: -2px;
  right: -2px;
  top: 25%;
  bottom: 25%;
}
div:before {
  content: '';
  display: block;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
  position: absolute;
  height: 100%;
  left: 25%;
  right: 25%;
  top: -2px;
  bottom: -2px;
}

<div>Box Text</div>

Answer 2

.a {
  height: 100px;
  width: 100px;
  text-align: center;
  line-height: 100px;
  background-color: #eee;
  position: relative;
  }

.ul {
  position: absolute;
  top: 0;
  left: 0;
  height: 30%;
  width: 30%;
  border-top: 1px solid black;
  border-left: 1px solid black;
  }

.ur {
  position: absolute;
  top: 0;
  right: 0;
  height: 30%;
  width: 30%;
  border-top: 1px solid black;
  border-right: 1px solid black;
  }

.ll {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 30%;
  width: 30%;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  }

.lr {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 30%;
  width: 30%;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  }

<div class="a">
  <span>text</span>
  <div class="ul"></div>
  <div class="ur"></div>
  <div class="ll"></div>
  <div class="lr"></div>
</div>

Answer 3

以下是 Matthew 在评论中提到的border-image解决方案。只是为了记录，这里有很多好的答案。更不用说border-image可能不适用于所有浏览器。

Can I use border-image

这是使用内联SVG的解决方案。

＆＃13;

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise);

div {
  width: 275px;
  height: 155px;
  margin: 0 auto;
  font-size: 6.2em;
  text-align: center;
  font-family: 'Waiting for the Sunrise', cursive;
}

.inline-svg {
  border: 5px solid white;
  border-image: url('data:image/svg+xml;utf8,<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="275px" height="155px" viewBox="0 0 275 155" enable-background="new 0 0 275 155" xml:space="preserve"><path fill="#ff0000" d="M0.5,38.5v-38h57v15h-42v23H0.5z M260.5,38.5h15v-38h-59v15h44V38.5z M260.5,112.5v28h-44v15h59v-43H260.5z M15.5,112.5h-15v43h57v-15h-42V112.5z"/></svg>') 2% stretch;
  min-width: 50%;
}

@media screen and (min-width: 992px) {
  .inline-svg {
    width: 360px;
    height: 265px;
  }
  div {
    font-size: 9.4em;
  }
}

＆＃13;

<div class="inline-svg">Text</div>

＆＃13;

＆＃13;

＆＃13;