css - css中具有边界半径的半三 Angular 形

Question

我有这段带有 css 的半三 Angular 形代码，但我需要在三 Angular 形的中点放置一个边界半径，如图所示:

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()在你的三 Angular 形元素上。通过倾斜元素，边界半径效果保留在拐 Angular 处。

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

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>