如何从边角移除部分边框？

Question

我想去掉边框的边角，就像这张图片。

​

​

Answer 1

您可以使用::before和::after伪元素来覆盖(从而“隐藏”)部分边框：

​

.bordery {
  border: 1px solid teal;
  padding: 20px;
  position: relative;
}
.bordery::after,
.bordery::before {
  background-color: white;
  content: "";
  display: block;
  height: 10px;
  position: absolute;
  width: 10px;
}
.bordery::after {
  bottom: -1px;
  right: -1px;
}
.bordery::before {
  top: -1px;
  left: -1px;
}

<div class="bordery">This is just some sample content.</div>

​

Answer 2

您可以使用:before和:after伪元素来创建它。

​

.el {
  position: relative;
  width: 200px;
  height: 50px;
  margin: 50px;
}
.el:after,
.el:before {
  content: '';
  position: absolute;
  height: 90%;
  width: 100%;
}
.el:before {
  top: -5px;
  left: -5px;
  border-top: 1px solid orange;
  border-left: 1px solid orange;
}
.el:after {
  bottom: -5px;
  right: -5px;
  border-bottom: 1px solid orange;
  border-right: 1px solid orange;
}

<div class="el"></div>

​

Answer 3

您可以通过以下方式完成此操作：

        #rectangle{
        width:400px;
        height: 200px;
        border-style: solid;
        color:orange;
        position: absolute;
    }
    #eraser1{
    position: absolute;
        width: 50px;
        height: 50px;
        background-color:white;
        margin: -10px 0px 0px 374px;
    }
    #eraser2{
    position: absolute;
        width: 50px;
        height: 50px;
        background-color:white;
        margin: 175px 0px 0px -13px;
    }