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伪元素来覆盖（以及＆＃34;隐藏＆＃34;）部分边框：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

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

4 个答案: