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