How to make 4 corner geometric objects with CSS?

![How can I make a figure in the picture with CSS?](https://i.stack.imgur.com/sOhp9.png)

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

```html
<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/>