如何实现倒角CSS边框角而不是圆角？ [英] How to achieve chamfered CSS Border Corners rather than rounded corners?

问题描述

使用CSS border-radius 属性，我可以在结尾处有一个弯曲的圆角边角。

  .boxLeft {
 border-right：1px dotted＃333; 
 border-bottom：1px dotted＃333; 
 border-radius：0 0 10px 0; 
} 
 
 .boxRight {
 border-left：1px dotted＃333; 
 border-bottom：1px dotted＃333; 
 border-radius：0 0 0 10px; 
} 
  

但我想要一个边框角，如下图所示。如果我有两个盒子（黄色和粉红色）彼此相遇，我想在底部会合点（虚线角落）有一个苛刻的角落，我该怎么办？

可以使用CSS ？

解决方案

这里有一种方法，虽然它有一些缺点，像没有边框，它不透明：

HTML：

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

CSS：

  .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; 
} 
  

结果： b

>

这是一个小提琴。

With the CSS border-radius property I can have a curvy, rounded border corner at the end.

.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;
}

But I want a border corner like the image below. If I have two boxes (Yellow & Pink) meeting each other and I want a harsh corner at the bottom meeting point (dotted corner), what should I do?

Is that possible using CSS?

解决方案

Here's a way, although it does have some shortcomings, like no borders and it isn't transparent:

HTML:

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

CSS:

.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;
}

RESULT:

Here's a fiddle.

这篇关于如何实现倒角CSS边框角而不是圆角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！