我有这个代码
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>
