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 and 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>

css 中的半三角形，边界半径

Half triangle in css with border radius

css

css-shapes