如何在文字周围创建CSS边框角

Question

我似乎无法弄清楚如何在响应文本周围放置角线边框。

我尝试使用绿色边角实现的屏幕截图： Here是文本所在的域。

div {
position: relative;
width: 380px;
height: 0px;
margin: 6px;

}

div:after {
    display: block;
    content: "";
    width: 75px;
    height: 75px;
    position: absolute;
    top: -5px;
    right: -5px;
    border-top: 4px solid green;
    border-right: 4px solid green;
}
a p:before {
    display: block;
    content: "";
    width: 75px;
    height: 75px;
    position: absolute;
    bottom: -70px;
    left: -6px;
    border-bottom: 4px solid green;
    border-left: 4px solid green;
}

Answer 1

h1 {
  display: inline-block;
  position: relative;
  padding: 10px;
}

h1:before,
h1:after {
  height: 14px;
  width: 14px;
  position: absolute;
  content: '';
}

h1:before {
  right: 0;
  top: 0;
  border-right: 3px solid #9b59b6;
  border-top: 3px solid #9b59b6;
}

h1:after {
  left: 0;
  bottom: 0;
  border-left: 3px solid black;
  border-bottom: 3px solid black;
}

<h1>TEXT</h1>

height & width和before中的绝对位置和after是关键。

Answer 2

将a p:before更改为div:before，这将使您走上正确的道路。