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;

任何想法??

Answer 1

您可以在三角形元素上结合border-radius和transform: skew()来实现此效果。随着元素的倾斜，边界半径效应仍保留在角落。

这是一个有效的单元素示例。根据需要调整相应的值。

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;