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()您的三角形元素.随着元素的倾斜,边界半径效应仍保留在角落.

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

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>