如何用 CSS 制作 4 个角几何对象？ [复制]答案

【问题标题】：How to make 4 corner geometric objects with CSS? [duplicate]如何用 CSS 制作 4 个角几何对象？ [复制]
【发布时间】：2019-09-26 12:30:43
【问题描述】：

如何用 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/

【问题讨论】：

您能发布一些代码并展示您还尝试过什么吗？
jsfiddle.net/gndfzsLw
如果你想要一些动画：stackoverflow.com/a/55647261/8620333

标签： html css

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

这就是我要找的代码！太感谢了。您是否通过任何网站制作此代码？还是你一一写的？（线性渐变）

【解决方案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 可能会更简单（更少的标记）。

【讨论】：

那行得通。但是可以用更少的代码来完成吗？
可能是我的画布建议。
@AlexDeniz 你可以使用背景渐变来避免额外的容器codepen.io/gc-nomade/pen/OYywjB

【解决方案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>

【讨论】：