html - 使用CSS在三 Angular 形左上角的边框半径

Question

我有这个代码

div {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 85px 85px 0 0;
  border-color: #c00000 transparent transparent transparent;
  float: left;
  position: absolute;
  top: 8px;
}

<div></div>

如何将左上角的边框半径应用到 CSS 三 Angular 形上方？好像不可能here .

Answer 1

• 首先在所有边上设置相等的border-width
• 然后将border-color添加到top和left，并设置right和bottom 透明

div {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px;
  border-color: #c00000 transparent transparent #c00000;
  float: left;
  position: absolute;
  top: 8px;
  border-radius: 10px 0px 0px 0px;
}

<div></div>

通过box-shadow，您可以使用伪元素来提供box-shadow

div {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px;
  border-color: #c00000 transparent transparent #c00000;
  float: left;
  position: absolute;
  top: 8px;
  border-radius: 10px 0px 0px 0px;
}
div:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 155px;
  top: -55px;
  left: 54px;
  transform: rotate(45deg);
  transform-origin: left top;
  box-shadow: 2px 1px 6px 1px red;
}

<div></div>