HTML CSS: 边框有不寻常的角

Question

我知道怎么做双边框。但是这样的弯道要怎么做呢？

border example

Answer 1

解决方案：http://jsfiddle.net/w4ho0eqk/27/

有多种方法可以创建这种双边框。您可以使用 border-image CSS 属性或使用自定义 SVG 线条和圆手动创建类似的东西。在这种情况下，我使用固定定位来实现类似于您的示例。

Answer 2

这是一个纯 CSS 和一个元素的解决方案：

.box {
 margin:50px;
 width:200px;
 height:200px;
 border:1px solid #000;
 border-radius: 10px;
 background:
    radial-gradient(circle at center,#000 62%,transparent 65%) 5px 5px/7px 7px,
    radial-gradient(circle at center,#000 62%,transparent 65%) calc(100% - 5px) 5px/7px 7px,
    radial-gradient(circle at center,#000 62%,transparent 65%) 5px calc(100% - 5px)/7px 7px,
    radial-gradient(circle at center,#000 62%,transparent 65%) calc(100% - 5px) calc(100% - 5px)/7px 7px,
    
    linear-gradient(#000,#000) 0 8px/100% 1px,
    linear-gradient(#000,#000) 8px 0/1px 100%,
    linear-gradient(#000,#000) 0 calc(100% - 8px)/100% 1px,
    linear-gradient(#000,#000) calc(100% - 8px) 0/1px 100%;
 background-repeat:no-repeat;
 position:relative;
 z-index:0;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:-8px;
  right:0;
  left:0;
  bottom:-8px;
  background:
    radial-gradient(circle at center,#000 62%,transparent 65%) 5px 5px/7px 7px,
    radial-gradient(circle at center,#000 62%,transparent 65%) calc(100% - 5px) 5px/7px 7px,
    radial-gradient(circle at center,#000 62%,transparent 65%) 5px calc(100% - 5px)/7px 7px,
    radial-gradient(circle at center,#000 62%,transparent 65%) calc(100% - 5px) calc(100% - 5px)/7px 7px;
 background-repeat:no-repeat;
}
.box:after {
  top:0;
  right:-8px;
  left:-8px;
  bottom:0;
}

<div class="box">

</div>

HTML CSS: 边框有不寻常的角

HTML CSS: border with unusual corners

html

css

border