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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/html/226513.html

猜你在找的HTML相关文章