如何实现倒角CSS边角而不是圆角？

Question

使用CSS border-radius属性,我可以在末尾有一个弯曲的圆角边角.

.boxLeft{
    border-right: 1px dashed #333;
    border-bottom: 1px dashed #333;
    border-radius: 0 0 10px 0;
}

.boxRight{
    border-left: 1px dashed #333;
    border-bottom: 1px dashed #333;
    border-radius: 0 0 0 10px;
}

但我想要一个如下图所示的边角.如果我有两个盒子(黄色和粉红色)相遇,我想在底部会合点(虚线角落)有一个刺眼的角落,我该怎么办？

这有可能使用CSS吗？

Answer 1

这是一种方式,虽然它确实有一些缺点,如没有边框,它不透明:

HTML:

.left,
.right {
  width: 100px;
  height: 100px;
  float: left;
  position: relative;
}

.left {
  background: lightpink;
}

.right {
  background: lightblue;
}

.right::after,
.left::after {
  width: 0px;
  height: 0px;
  background: #fff;
  content: '';
  position: absolute;
  bottom: 0;
}

.right::after {
  left: 0;
  border-top: 10px solid lightblue;
  border-right: 10px solid lightblue;
  border-left: 10px solid white;
  border-bottom: 10px solid white;
}

.left::after {
  right: 0;
  border-top: 10px solid lightpink;
  border-right: 10px solid white;
  border-left: 10px solid lightpink;
  border-bottom: 10px solid white;
}

CSS:

<div class="left"></div>
<div class="right"></div>

结果:

这是一个小提琴.

Answer 2

CSS3 Gradients可以做到这一点:

试试这个,这是一个小提琴:

http://jsfiddle.net/S2nqK/3/

HTML:

div {
  background: #c00;
  /* fallback */
  background: -moz-linear-gradient(45deg, transparent 10px, #c00 10px), -moz-linear-gradient(135deg, transparent 10px, #c00 10px), -moz-linear-gradient(225deg, transparent 10px, #c00 10px), -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
  background: -o-linear-gradient(45deg, transparent 10px, #c00 10px), -o-linear-gradient(135deg, transparent 10px, #c00 10px), -o-linear-gradient(225deg, transparent 10px, #c00 10px), -o-linear-gradient(315deg, transparent 10px, #c00 10px);
  background: -webkit-linear-gradient(45deg, transparent 10px, #c00 10px), -webkit-linear-gradient(135deg, transparent 10px, #c00 10px), -webkit-linear-gradient(225deg, transparent 10px, #c00 10px), -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

div {
  background-position: bottom left, bottom right, top right, top left;
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}


/* Ignore the CSS from this point, it's just to make the demo more presentable */

div {
  float: left;
  width: 50px;
  margin: 15px auto;
  padding: 15px;
  color: white;
  line-height: 1.5;
}

CSS:

<div>Div 1</div>
<div>Div 2</div>

Answer 3

我首先使用 测试了 @thordarson 解决方案position: \'absolute\'。

\n\n

position: \'absolute\',\ntop: \'2.9rem\',\nleft: \'2.6rem\',\nborderLeft: \'1rem solid #6CAEC6\',\nborderBottom: \'0.7rem solid white\',\n

\n\n

如第一张图片所示，这在大多数设备上运行良好，但在 iPhone 或平板电脑上使用时，开始出现奇怪的线条：

\n\n

\n\n

\n\n

\n\n

正如@Collins 的回答，我随后开始使用clip-path: polygon，但我很难获得正确的形状。然后我找到了一个对我真正有帮助的网站：

\n\n

https://bennettfeely.com/clippy/

\n\n

它们提供现成的形状，然后可以将其拖动到所需的形状。

\n\n

\n\n

对于我需要的角落，我可以从网站复制正确的值。

\n\n

\n\n

我们的要求是 35\xc2\xb0 角度，为了获得正确的角度，我使用了该网站：

\n\n

https://www.ginifab.com/feeds/angle_measurement/

\n\n

\n\n

我与任何网站都没有隶属关系，它们只是真正帮助我得到了我想要的东西。它clip-path: polygon适用-webkit-clip-path: polygon于我们要求的所有设备和浏览器。

\n\n

兼容性检查：

\n\n

https://caniuse.com/#feat=css-clip-path

\n

Answer 4

这也可以使用“剪辑路径”。

-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);

-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);

div {
  width: 200px;
  height: 200px;
  background: red;
  -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

源代码笔

可以在此处找到对剪辑路径的支持... http://caniuse.com/#search=clip-path