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

我有一个带有不同颜色边框的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

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



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

最佳答案

怎么样：

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>

用红色和蓝色突出显示重叠部分

关于css - 模糊2个不同颜色的边框的连接？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28561020/