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

标签： htmlcss

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>