模糊不同颜色的2个边框的连接？

Question

我有一个带有不同颜色边框的div。我努力的设计融合了这两个边界加入的点。这可以用CSS完成吗？

<div class="panel">
  dfds
</div>

body {
  background: green;
}
.panel {
  margin: auto;
  width: 300px;
  height: 300px;
  background: white;
  border-radius: 10px;
  padding: 10px;
  border-right: 6px solid #D7D7D7;
  border-bottom: 6px solid #B9B9B9;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); 
}

http://codepen.io/anon/pen/XJEWqp

下面你可以看到右下角有一个尖锐的对角连接：

这与我创建的设计中的细节相同：

Answer 1

Howsabout this：

body {
  background: green;
}
.panel {
  margin: auto;
  width: 100px;
  height: 100px;
  background: white;
  border-radius: 10px;
  padding: 10px;
  -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
                    , inset -6px 0px 0 rgba(255, 0, 0, 0.5)
                    , inset 0px -6px 0 rgba(0, 0, 255, 0.5);
     -moz-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
                    , inset -6px 0px 0 rgba(255, 0, 0, 0.5)
                    , inset 0px -6px 0 rgba(0, 0, 255, 0.5);
          box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2)
                    , inset -6px 0px 0 rgba(255, 0, 0, 0.5)
                    , inset 0px -6px 0 rgba(0, 0, 255, 0.5);
}

<div class="panel">
  dfds
</div>

使用红色和蓝色突出显示重叠

Answer 2

您可以使用边框图像。

＆＃13;

＆＃13;

div {
  margin: 30px;
  width: 50px;
  height: 50px;
  background: #DDD;
  border: 10px solid transparent;
  -webkit-border-image: url('http://i.imgur.com/7qsGJvm.png') 30 30 round;
  -o-border-image: url(http://i.imgur.com/7qsGJvm.png'') 30 30 round;
  border-image: url('http://i.imgur.com/7qsGJvm.png') 30 30 round;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;