如何用CSS制作4个角几何对象？

Question

如何使用CSS制作4个角几何对象？

body {
    background: #d0d0d0;
}
.select {
    width: 60px;
    height: 60px;
    background: white;
    display: block;
    position: relative;
}

<div class="select">
    <div style=" height: 2px; width: 15%; background: red; position: absolute; top: 0; "></div>
    <div style=" height: 15%; width: 2px; background: red; position: absolute; top: 0; "></div>
    <div style=" height: 2px; width: 15%; background: red; position: absolute; bottom: 0; "></div>
    <div style=" height: 15%; width: 2px; background: red; position: absolute; bottom: 0; "></div>
    <div style=" height: 2px; width: 15%; background: red; position: absolute; right: 0; top: 0; "></div>
    <div style=" height: 15%; width: 2px; background: red; position: absolute; right: 0; top: 0; "></div>
    <div style=" height: 2px; width: 15%; background: red; position: absolute; bottom: 0; right: 0; "></div>
    <div style=" height: 15%; width: 2px; background: red; position: absolute; bottom: 0; right: 0; "></div>
</div>

https://jsfiddle.net/gndfzsLw/

Answer 1

这是使用线性梯度的解决方案：

div {
  height: 100px;
  width: 100px;
  background: linear-gradient(black, black) top left, 
              linear-gradient(black, black) top left,
              linear-gradient(black, black) top right,
              linear-gradient(black, black) top right,
              linear-gradient(black, black) bottom left,
              linear-gradient(black, black) bottom left,
              linear-gradient(black, black) bottom right,
              linear-gradient(black, black) bottom right;
  background-size: 2px 20px, 20px 2px;
  background-repeat: no-repeat;
}

<div></div>

Answer 2

正如赞成票和结束票所表明的那样，在提出关于SO的问题之前，希望您先努力并展示自己的工作。由于您是新手，而且我很好奇，所以我提出了一种可能性。

* {
    box-sizing: border-box;
}

body {
    background: #fff;
    padding: 40px;
}

.viewfinder {
    border: 3px solid;
    width: 50vh;
    height: 50vh;
    position: relative;
}

.viewfinder::before,
.viewfinder::after {
    content: '';
    position: absolute;
    background: #fff;
    width: 50%;
    height: calc(100% + 6px);
    top: -3px;
    left: 25%;
}

.viewfinder::after {
    width: calc(100% + 6px);
    height: 50%;
    top: 25%;
    left: -3px;
}

.viewfinder-content {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 10px;
    z-index: 1;
}

<div class="viewfinder">
    <div class="viewfinder-content">Some content.</div>
</div>

使用canvas可能更容易，更简单（减少标记）。

Answer 3

我提出的另一个例子可能是个奇怪的例子！但这可以产生相同的结果！

.rect-wrapper {
  /* background: rgba(4, 141, 68, .25); */
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  margin: 50px auto;
  position: relative;
}

.rect-top,
.rect-bottom {
  background: transparent;
  width: 100%;
  height: 100%;
  position: absolute;
}

.rect-top::before {
  position: absolute;
  content: "";
  width: 50px;
  height: 50px;
  border-top: 2px solid black;
  border-left: 2px solid black;
  left: 0;
  top: 0;
}

.rect-top::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 50px;
  border-top: 2px solid black;
  border-right: 2px solid black;
  right: 0;
  top: 0;
}

.rect-bottom::before {
  position: absolute;
  content: "";
  width: 50px;
  height: 50px;
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  left: 0;
  bottom: 0;
}

.rect-bottom::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 50px;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
  right: 0;
  bottom: 0;
}

<div class="rect-wrapper">
  <div class="rect-top"></div>
  <div class="rect-bottom"></div>
</div>