div只有四个角有边框怎么实现？

Question

div只有四个角有边框怎么实现？像这样的？

Answer 1

css3 可以用 background 实现，如下：

.rect {
    position: absolute; 
    top: 20px;
    left: 20px; 
    width: 100px; 
    height: 100px; 
    background: linear-gradient(to left, #f00, #f00) left top no-repeat, 
                linear-gradient(to bottom, #f00, #f00) left top no-repeat, 
                linear-gradient(to left, #f00, #f00) right top no-repeat,
                linear-gradient(to bottom, #f00, #f00) right top no-repeat, 
                linear-gradient(to left, #f00, #f00) left bottom no-repeat,
                linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat;
    background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;  
}

<div class="rect"></div>

其实我觉得还不如用 border-image 实现来得简单，不过 border-image 要切图，

Answer 2

强行撸了个

Answer 3

用背景图吧。伪元素做出来的不能写内容，而且你的示例里也不是纯色背景，不适用。
或者你可以强行把两个怼一齐，但是有无用元素也不太好。

#border{
  width: 100px;
  height: 100px;
  position: relative;
  margin: 100px auto 0;
}
#border:after{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  height: 25%;
  width: 25%;
  border-left: 1px solid black;
  border-top: 1px solid black;
}
#border:before{
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  display: block;
  height: 25%;
  width: 25%;
  border-right: 1px solid black;
  border-top: 1px solid black;
}
// 然后再来个下面的

Answer 4

1、提供一个思路：

• 写一个 div 拥有 border: 3px solid blue;
• div 中写四个 div 分别定位上下左右遮挡中间 border 部分

2、或者用其他人的思路，那样子需要拥有两个元素来为其分别设置 ::before 与 ::after

Answer 5

额，不知道我这个想法有没有人接受，就是用两个div，上面一个旋转45度，覆盖四边

Answer 6

我之前写过这个需求，用jq写的，给需要装饰的div，添加四个边角，其实就是四个div。边角的宽度，高度，颜色，数量（有可能只需要上下的或者左右的），都传参添加的，没找着以前的代码了。你可以自己撸一个，不难。大概就是这个样子了。

Answer 7

用四个 span 分别放在四个角，然后通过 nth-child 分别设置 border 宽度即可