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

总结

以上是内存溢出为你收集整理的html – 使用CSS在三角形上左上角的边框半径全部内容，希望文章能够帮你解决html – 使用CSS在三角形上左上角的边框半径所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。