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

我有这个代码

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三角形上应用边框半径？看起来好像不可能here.

解决方法

>首先在所有边上设置相等的边框宽度
>然后在顶部和左侧添加边框颜色,并将右侧和底部透明设置

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>

原文地址：https://www.jb51.cc/html/226513.html