更新CSS半径为直线(jsfiddle附加)

Question

我有一个jsfiddle链接如下https://jsfiddle.net/utLhbc3g/

正如你所看到的，我试图在盒子的左边底部做一个直角三角形。但它显示了一条曲线。

.box{
position:relative;
background:#fff;
display:block;
width:100px; 
height:100px;  
border-radius: 100% / 0 0 0 100px;
}
.box::before{
position:absolute;
z-index:-1;
width:100%;
height:100%;
background:#f9955e;
content:"";
}

谁能告诉我怎么把那条曲线弄直?

Answer 1

嗯。用边界半径是不会发生的。边框半径适用于圆角。如果我们添加一个边框，我们可以看到这里真正发生了什么。

.box {
position: relative;
background: #fff;
display: block;
width: 100px;
height: 100px;
border-radius: 100% / 0 0 0 100px;
border: 5px solid black;
}
.box::before {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background: red;
content: "";
}

<div class="box"></div>

但是，您还有其他选择。CSS三角形提供了一个很好的选择。

.box {
width: 0;
height: 0;
border-style: solid;
border-width: 120px 0 0 120px;
border-color: transparent transparent transparent #4f46e5;
}

<div class="box"></div>

参见:https://www.fetoolkit.io/widget/css-triangle

您也可以考虑clip-path属性，这取决于您的用例。

clip-path: polygon(0 0, 0% 100%, 100% 100%)👈，它会给你一个等效的对象。

查看这里有一个很好的剪辑路径可视化工具(它会给你代码):https://bennettfeely.com/clippy/

祝你好运!