将 css 半径更新为直线（附带 jsfiddle）

Question

我有一个 jsfiddle link 如下 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: polygon(0 0, 0% 100%, 100% 100%) 这会给你一个等效的对象。

在此处查看一个不错的剪辑路径可视化工具（它为您提供了代码）： https://bennettfeely.com/clippy/

祝你好运！

将 css 半径更新为直线（附带 jsfiddle）

update css radius to straight line (jsfiddle attached)

html

javascript

css

styles

reactjs