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

Question

我想像这张图片一样去除边框的角。

Answer 1

您可以使用 :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 2

您可以使用 ::before 和 ::after 伪元素来覆盖（因此 "hide"）部分边框：

.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 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;
    }

Answer 4

您可以使用 css3 linear-gradient 将此背景绘制为单个 <div> 元素，而不使用任何伪元素。

div {
  background-image: linear-gradient(to left, transparent 20px, orange 20px),
                    linear-gradient(to bottom, transparent 20px, orange 20px),
                    linear-gradient(to right, transparent 20px, orange 20px),
                    linear-gradient(to top, transparent 20px, orange 20px);
  background-position: 100% 0, 100% 0, 0 100%, 0 100%;
  background-size: 100% 1px, 1px 100%;
  background-repeat: no-repeat;      
}

div {
  background-color: #eee;
  background-image: linear-gradient(to left, transparent 20px, orange 20px),
                    linear-gradient(to bottom, transparent 20px, orange 20px),
                    linear-gradient(to right, transparent 20px, orange 20px),
                    linear-gradient(to top, transparent 20px, orange 20px);
  background-position: 100% 0, 100% 0, 0 100%, 0 100%;
  background-size: 100% 1px, 1px 100%;
  background-repeat: no-repeat;
  position: relative;
  margin: 0 auto;
  height: 100px;
  width: 80%;
}

<div></div>

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

How to remove some part of borders from the corners?

html

css

rounded-corners

corner-detection