HTML：

Question

我想知道在CSS或Jquery中是否可以创建边框但仅限于角落。像这样：

****                         ****
*                               *
*                               *

             CONTENT

*                               *
*                               *
****                         ****

Answer 1

我会使用重叠的div。

一个方角。而另一个圆角（所以它不会隐藏第一个角落）。

<div id="div1" />
<div id="div2" />


#div1 {
  position:absolute;
  top:9px;
  left:9px;
  height:100px;
  width:100px;
  background-color:white;
  border:1px solid black;
}

#div2 {
  position:relative;
  top:-1px;
  left:-1px;
  height:102px;
  width:102px;
  background-color:white;
  border-radius: 15px;
}

http://jsfiddle.net/y3EfP/

结果：

enter image description here

@ web-tiki提供的增强型解决方案：

http://jsfiddle.net/webtiki/y3EfP/147/

Answer 2

假设<div id="content">CONTENT</div>且CONTENT包含至少一个HTML节点。

#content {position:relative}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
    position:absolute; content:' ';
    width:80px; height: 80px;
    border-color:red; /* or whatever colour */
    border-style:solid; /* or whatever style */
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}

这是Fiddle

Answer 3

SVG

如果你现在想要开始使用向量来提供很好的响应能力，这是另一个很好的选择。

＆＃13;

<svg viewBox="0 0 100 100" width="50px">
  <path d="M25,2 L2,2 L2,25" fill="none" stroke="black" stroke-width="3" />
  <path d="M2,75 L2,98 L25,98" fill="none" stroke="black" stroke-width="3" />
  <path d="M75,98 L98,98 L98,75" fill="none" stroke="black" stroke-width="3" />
  <path d="M98,25 L98,2 L75,2" fill="none" stroke="black" stroke-width="3" />
</svg>

＆＃13;

SVG是一个很棒的工具。在这种情况下使用SVG的一些优点是：

曲线控制
填充控件（不透明度，颜色）
描边控制（宽度，不透明度，颜色）
代码金额
构建和维护形状的时间
可扩展
没有HTTP请求（如果在示例中使用内联）

内联SVG的

浏览器支持可以返回到Internet Explorer 9.有关详细信息，请参阅canIuse。

Answer 4

以下是一些创建此效果的方法，而不使用任何额外的伪/真元素。需要注意的是，这两种方法都只适用于现代浏览器，因为它们使用CSS3属性。

使用 border-image：border-image属性可让您轻松创建此类效果。方法如下：

创建一个透明图像，其边框位于角落，如here。
将此图像设置为border-image-source并让浏览器处理其余部分:)由于border-image-repeat的默认值为stretch，浏览器会将原始图像拉伸以适合即使容器变大，也要容器。
为border-image-width属性设置的值确定边框的厚度。

.bordered {
  background-color: beige;
  border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
  border-image-slice: 1;
  border-image-width: 5px;
}
.square {
  height: 150px;
  width: 150px;
}
.large-square {
  height: 350px;
  width: 350px;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}

<div class='bordered square'></div>
<div class='bordered large-square'></div>

<强>优点：

不需要额外的元素（伪或真），这意味着更少杂乱的标记，伪元素可以用于其他需要。
反应灵敏。即使容器的尺寸发生变化，浏览器也会调整边框。

<强>缺点：

Relatively lower browser support。如果需要IE10支持，那么这是不行的。

由于边框图像被拉伸，如果原始图像的画布是正方形而容器是矩形，则边框在顶部和底部看起来比左右更宽。

.bordered {
  background-color: beige;
  border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
  border-image-slice: 2;
  border-image-width: 5px;
}
.small-square {
  height: 75px;
  width: 75px;
}
.square {
  height: 150px;
  width: 150px;
}
.large-square {
  height: 350px;
  width: 350px;
}
.rectangle {
  height: 150px;
  width: 250px;
}
.large-rectangle {
  height: 150px;
  width: 350px;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}

<div class='bordered small-square'></div>
<div class='bordered square'></div>
<div class='bordered large-square'></div>
<div class='bordered rectangle'></div>
<div class='bordered large-rectangle'></div>

使用 background-image：background-image属性也可以与linear-gradient图片一起使用以产生效果。方法如下：

创建四个linear-gradient图像（两个用于顶部，底部，两个用于左，右）。这些渐变将以所需的颜色开始，并继续为该颜色提供与边框图像的宽度/高度一样多的像素。之后它应该是透明的。
对于顶部和底部边框，渐变的方向应为to right。对于左右边框，它应为to bottom。
background-size值确定边框的粗细。对于顶部和底部边框，渐变图像的大小在X轴上为100％，在Y轴上为5px（厚度）。对于左右边框，尺寸在X轴上为5px（厚度），在Y轴上为100％。
background-repeat对于顶部，底部边框应设置为repeat-x，对于左右边框设置为repeat-y。
根据需要，background-position在X或Y轴上设置为（-1 *渐变颜色大小的一半）。这是为了使一半的彩色区域出现在元素的一侧，而另一半出现在另一侧（因为渐变是重复的）。

.bordered.square {
  height: 150px;
  width: 150px;
}
.bordered.rectangle {
  height: 150px;
  width: 250px;
}
.bordered {
  background-color: beige;
  background-image: linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px);
  background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%;
  background-position: -15px 0%, -15px 100%, 0% -15px, 100% -15px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}

<div class='bordered square'></div>
<div class='bordered rectangle'></div>

<强>优点：

不需要额外的元素（伪或真），这意味着更少杂乱的标记，伪元素可以用于其他需要。

由于渐变中颜色的宽度是固定的，因此具有合理的响应性。如果边框破折号的宽度需要根据容器的尺寸进行更改，那么我们可以将渐变中的像素值更改为百分比（稍微更改一些），如下面的代码段所示。

.bordered.square {
  height: 150px;
  width: 150px;
}
.bordered.large-square {
  height: 250px;
  width: 250px;
}
.bordered {
  background-color: beige;
  background-image: linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%);
  background-size: 90% 5px, 90% 5px, 5px 90%, 5px 90%;
  background-position: 0% 0%, 0% 100%, 0% 0%, 100% 0%;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}

<div class='bordered square'></div>
<div class='bordered large-square'></div>

<强>缺点：

Relatively better browser support。如果需要IE9-支持那么这是不行的。
如果使用基于百分比的渐变，那么border-image所提到的矩形的相同缺点也适用于此。

Answer 5

你绝对可以放置四个<div>，每个角落一个，每个都有适当的两个边框。

<强> HTML

<div class="corners">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom right"></div>
  <div class="bottom left"></div>
  content goes here
</div>

<强> CSS

.corners {
  position: relative;
  width: 100px; /* for demo purposes */
  padding: 10px;
}

.top, .bottom {
  position: absolute;
  width: 10px;
  height: 10px;
}

.top {
  top: 0;
  border-top: 1px solid;
}

.bottom {
  bottom: 0;
  border-bottom: 1px solid;
}

.left {
  left: 0;
  border-left: 1px solid;
}

.right {
  right: 0;
  border-right: 1px solid;
}

Answer 6

您可以使用多个线性渐变作为背景图像来实现这一目标。

＆＃13;

div {
  width: 100px;
  height: 100px;
  margin: 20px;

  background:
    linear-gradient(to right, black 4px, transparent 4px) 0 0,
    linear-gradient(to right, black 4px, transparent 4px) 0 100%,
    linear-gradient(to left, black 4px, transparent 4px) 100% 0,
    linear-gradient(to left, black 4px, transparent 4px) 100% 100%,
    linear-gradient(to bottom, black 4px, transparent 4px) 0 0,
    linear-gradient(to bottom, black 4px, transparent 4px) 100% 0,
    linear-gradient(to top, black 4px, transparent 4px) 0 100%,
    linear-gradient(to top, black 4px, transparent 4px) 100% 100%;

  background-repeat: no-repeat;
  background-size: 20px 20px;
}

＆＃13;

<div></div>

＆＃13;

Answer 7

夹路径

在彼此的顶部使用两个div 并在div中添加一个clip路径，在后面可以创建一个类似边框的效果。

＆＃13;

.wrapper {
  display: inline-block;
  background-color: black;
  line-height: 0px;
  -webkit-clip-path: polygon(0% 100%, 30% 100%, 30% 70%, 70% 70%, 70% 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 0%, 0% 0%, 0% 30%, 30% 30%, 30% 70%, 0% 70%);
    clip-path: polygon(0% 100%, 
                             30% 100%, 
                             30% 70%, 
                             70% 70%, 
                             70% 100%, 
                             100% 100%, 
                             100% 70%, 
                             70% 70%,
                             70% 30%,
                             100% 30%,
                             100% 0%,
                             70% 0%,
                             70% 30%,
                             30% 30%,
                             30% 0%,
                             0% 0%,
                             0% 30%,
                             30% 30%,
                             30% 70%,
                             0% 70%);
}
.wrapper {} .wrapper div {
  display: inline-block;
  height: 150px;
  width: 150px;
  margin: 10px;
  background-color: white;
}

＆＃13;

<div class="wrapper">
  <div></div>
</div>

＆＃13;

两个伪元素

使用两个大的伪元素可以创建边框效果。

＆＃13;

.cut-border {
  position: relative;
  display: inline-block;
  border: 5px solid black;
  width: 150px;
  height: 150px;
}
.cut-border::before {
  content: "";
  position: absolute;
  height: calc(100% + 10px);
  width: 50%;
  background-color: white;
  top: -5px;
  left: 25%;
}
.cut-border::after {
  content: "";
  position: absolute;
  height: 50%;
  width: calc(100% + 10px);
  background-color: white;
  top: 25%;
  left: -5px;
}

＆＃13;

<div class="cut-border"></div>

＆＃13;

Answer 8

我发现了这个问题，但我对边缘半径方法不满意：因为我使用了更厚的边框，效果不如我想的那么好。我设法创建另一个解决方案，没有图像，没有任何额外的标记：

ColoredRectangle

这是一个带有这个例子的JSFiddle：https://jsfiddle.net/t6dbmq3e/ 希望它有所帮助。

Answer 9

这是一个使用渐变和CSS变量的想法，您可以在其中轻松控制边框的形状：

.box {
  --b:5px;   /* thickness of the border */
  --c:red;   /* color of the border */
  --w:20px;  /* width of border */
  

  border:var(--b) solid transparent; /* space for the border */
  background:
    linear-gradient(var(--c),var(--c)) top left,
    linear-gradient(var(--c),var(--c)) top left,
    linear-gradient(var(--c),var(--c)) bottom left,
    linear-gradient(var(--c),var(--c)) bottom left,
    linear-gradient(var(--c),var(--c)) top right,
    linear-gradient(var(--c),var(--c)) top right,
    linear-gradient(var(--c),var(--c)) bottom right,
    linear-gradient(var(--c),var(--c)) bottom right;
  background-size:var(--b) var(--w),var(--w) var(--b);
  background-origin:border-box;
  background-repeat:no-repeat;
  
  /*Irrelevant code*/  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  line-height:90px;
}

<div class="box">
some content
</div>

<div class="box" style="--c:blue;--w:40px;--b:2px">
some content
</div>

<div class="box" style="--c:green;--w:30%;--b:8px">
some content
</div>

<div class="box" style="--c:black;--w:50%;--b:3px">
some content
</div>

<div class="box" style="--c:purple;--w:10px;--b:10px">
some content
</div>

<div class="box" style="--c:orange;--w:calc(50% - 10px);--b:4px">
some content
</div>

如果将其与蒙版结合使用，您还可以拥有复杂的颜色：

.box {
  --b:5px;   /* thickness of the border */
  --c:red;   /* color of the border */
  --w:20px;  /* width of border */
  

  padding:var(--b); /* space for the border */
  
  position:relative;
  /*Irrelevant code*/  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  line-height:90px;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--c,red);
  -webkit-mask:
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) bottom right,
    linear-gradient(#fff,#fff) bottom right;
  -webkit-mask-size:var(--b) var(--w),var(--w) var(--b);
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) bottom right,
    linear-gradient(#fff,#fff) bottom right;
  mask-size:var(--b) var(--w),var(--w) var(--b);
  mask-repeat:no-repeat;
}

<div class="box">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,red,blue);--w:40px;--b:2px">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px);--w:30%;--b:8px">
some content
</div>

<div class="box" style="--c:conic-gradient(red,green,yellow);--w:50%;--b:3px">
some content
</div>

<div class="box" style="--c:purple;--w:10px;--b:10px">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,orange 0 5px,blue 5px 10px);--w:calc(50% - 10px);--b:4px">
some content
</div>

Answer 10

没有干净的css方法只是让角落边界，但你可以尝试模仿效果。这样的事可能是：http://jsfiddle.net/RLG4z/

<div id="corners">
  <div id="content">
    content
  </div>
</div>

#corners {
    width: 200px;
    height: 50px;
    border-radius: 10px;
    background-color: red;
    margin: 10px;
}
#content {
  background-color: white;
  border-radius: 15px;
  height: 30px;
  padding: 10px;
}

由于边框半径不同，底层div的背景颜色显示为低谷，在角落上产生边框效果。

就我个人而言，我认为我会使用背景图像来实现这一目标，以便更好地控制结果。

Answer 11

这是你的照片：

HTML：

<div class="shell">

    <div class="top">

        <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

    </div>

    <div class="content">
        <p>CONTENT</p>
    </div>

    <div class="bottom">

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

      <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>
    </div>

和CSS：

.shell { width: 200px;}
.left{ float:left; }
.right{float:right; }
.clear { clear: both; line-height: 10px; }
.content { line-height: 10px; text-align: center; }

Answer 12

以上是上述答案的修改版本，此版本具有相对定位的父级和绝对定位子级，因此我们可以添加on on hover效果。

http://jsfiddle.net/3jo5btxd/

HTML:
<div id="div1"><div id="div2"><img src="http://placekitten.com/g/82/82"></div></div>

CSS:

#div1 {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: white;
    border: 1px solid transparent;
}

#div2 {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 84px;
    width: 84px;
    background-color: #FFF;
    border-radius: 15px;
    padding: 10px;
}

#div1:hover {
    border: 1px solid red;
}

Answer 13

好吧，因为我吮吸CSS我认为我自己无法做到，但我这样做，似乎工作：

<div id="half" style="position:absolute; top:0; left:0; width:30px; height:30px; overflow:visible; border-top:3px solid #F00; border-left:3px solid #06F;"></div>

<div id="half" style="position:absolute; bottom:0; right:0; width:30px; height:30px; overflow:visible; border-bottom:3px solid #F00; border-right:3px solid #06F;"></div>

它似乎在起作用;-)抱歉打扰并感谢您的帮助。

Answer 14

这是我最近做的事情，内容既垂直又水平。

HTML

<div class="column">
  <div class="c-frame-wrapper">
    <div class="c-frame-tl"></div>
    <div class="c-frame-tr"></div>
    <div class="c-frame-br"></div>
    <div class="c-frame-bl"></div>
    <div class="c-frame-content">
        &copy; Copyright 2015 - Company name<br /><br />
        St Winifrids St,<br />
        The Saints, Harrogate HG1 5PZ, UK<br />
    </div>
  </div>
</div>

CSS

.c-frame-wrapper {
  width: 250px;
  height: 100px;
  font-size:11px;
  color: $dark-grey-lighten-70;
  /* center align x axis */
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.c-frame-tl {
  top: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid none none solid;
  border-color: #eb0000;
}

.c-frame-tr {
  top: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid solid none none;
  border-color: #eb0000;
}

.c-frame-br {
  bottom: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none solid solid none;
  border-color: #eb0000;
}

.c-frame-bl {
  bottom: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none none solid solid;
  border-color: #eb0000;
}

.c-frame-content {
  width:100%;
  text-align: center;
  /*center alignment x and y*/
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%,-50%); 
}

JSFiddle

Answer 15

我采纳了 Majid Laissi 的回答并进行了修改，使其更易于理解、简单且易于修改。

img{
  width:70px;
  height:70px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.custom-corners {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
}

.custom-corners:before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  border: 1px solid #fff;
  height: 100%;
  width: 100%;
  border-radius: 10%;
}

.custom-corners:after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  border: 1px solid #fff;
  height: 100%;
  width: 100%;
  border-radius: 10%;
}

<div class="custom-corners">
  <img src="https://cdn.logo.com/hotlink-ok/logo-social-sq.png" alt="">
</div>

Answer 16

我认为最好的解决方案是伪元素方法。很好，干净，没有（太多）额外的元素污染html。

我使用上面的代码创建了这个sass mixin，用于复制和粘贴解决方案：

@mixin corner-borders($corner-width: 1px, $corner-size: 5px, $color-border: grey, $color-background: white) {
    position: relative;
    border: $corner-width solid $color-border;
    background-color: $color-background;

    &::before {
        content: "";
        z-index: 0;
        position: absolute;
        top: -$corner-width;
        bottom: -$corner-width;
        left: $corner-size;
        right: $corner-size;
        background-color: $color-background;
    }

    &::after {
        content: "";
        z-index: 0;
        position: absolute;
        top: $corner-size;
        bottom: $corner-size;
        left: -$corner-width;
        right: -$corner-width;
        background-color: $color-background;
    }
}

然后你可以像这样使用它：

HTML：

<div class="border">
    <div class="content">
        Content
    </div>
</div>

SCSS

.border {
    @include corner-borders;
}

.content {
    position: relative;
    z-index: 1;
}

你需要z-index＆amp;在那里的相对位置，所以内容位于伪元素之上。

我在这里制作了一个codepen演示：http://codepen.io/timrross/pen/XMwVbV

Answer 17

我喜欢@Tims方法，但是它强迫我为框设置背景颜色，这是我不想要的，因为我将焦点放在背景图像对象上。在我的情况下，我也只需要两个边缘，这使得它的结构有些不同。

因此，我在结构上有所不同，使其更加灵活，并且仍可在每种浏览器中使用。

如果您需要四个角，则该解决方案不起作用，而只是想将其留在这里供将来的搜索者使用。

:root {
  --border-width: 5px;
  --corner-size: 20px;
  --border-color: red;
}
    
.box-corners {
  position:relative;
}

        .box-corners::before,
        .box-corners::after {
            content: "";
            position: absolute;
            width:var(--corner-size);
            height:var(--corner-size);
            border:var(--border-width) solid var(--border-color);
        }
    
        .box-corners::before {
            left: 0;
            top: 0;
            border-bottom:none;
            border-right:none;
        }
    
        .box-corners::after {
            bottom: 0;
            right: 0;
            border-left:none;
            border-top:none;
        }
        
        
/* ############## THIS IS JUST OPTIONAL FOR THE HOVER EFFECT ############# */


    .box-corners {
        transition:background-color 0.3s ease-in-out;
    }


    .box-corners:hover {
        background:rgba(0, 0, 0, 0.5)!important;
    }

        .box-corners::before,
        .box-corners::after {
            box-sizing:border-box;
            transition:width 0.3s ease-in-out, height 0.3s ease-in-out;
        }

        .box-corners:hover::before,
        .box-corners:hover::after {
            width:100%;
            height:100%;
        }

<div class="box-corners" style="width:300px;height:300px;background:#f7f7f7;" />

悬停效果

您只需要CSS代码的第一部分即可使边缘正常工作。第二部分只是允许轻松地添加一个不错的悬停效果，如果不需要的话，也可以删除它。

没有CSS变量和Sass

如果您不想使用css变量，则只需将变量替换为硬编码值即可。如果要使用它来制作sass mixin，只需将其包装在@mixin调用中，然后将vars替换为sass变量即可。

Answer 18

我采用了边框半径方法，但我不想使用绝对定位或必须知道内容的大小。

幸运的是，在所有方向上设置负边距提供了我们需要的一切：

{headers: { 'Content-Type': 'application/json' }}

Answer 19

.box{
    
        background-color: aquamarine;
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 300px;
        height: 200px;
        border: 30px solid black;

}
.box::before{
    content:'';
    position: absolute;
    top:25px; left:-30px;
    height: 150px;
    width: 360px;
    background: aquamarine;
    
}
.box::after{
    content:'';
    position: absolute;
    top:-30px; left:30px;
    height: 260px;
    width: 240px;
    background: aquamarine;
    
}

<div class="box">

</div>

CSS - 仅显示角落边框

19 个答案:

SVG

夹路径

两个伪元素

HTML：

SCSS