CSS中如何使用边框半径创建半三角形

Question

我有一段用CSS实现的半三角形代码，但是我需要在三角形中点处添加一个边框半径，就像这张图片:

width: 0;
height: 0;
border-style: solid;
border-width: 0px 30px 20px 0;
border-color: transparent #bde5ff transparent transparent;
border-top-left-radius: 2px;

有什么想法吗？

- user3810167

Answer 1

您可以通过在三角形元素上结合使用border-radius和transform: skew()来实现该效果。通过对元素进行倾斜，边框半径效果仍然保留在角落中。

下面是一个可用的单元素示例。根据您的需求调整相应值即可。

div {
  width: 150px;
  height: 150px;
  position: relative;
  background: lightblue;
  border-radius: 8px;
  margin-left: 30px;
}
div::before {
  position: absolute;
  left:0;
  top: 20px;
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: lightblue;
  transform: skew(50deg);
}

<div></div>

- andreas