纯css实现飘带效果,浮动飘带效果

html:

<div class="wrapper">
	<span class="flag">未完成(2)</span>
</div>

css:

.wrapper{ position: relative; width: 200px; height: 200px; border: 1px solid #999;}
.flag{ position: absolute; right: 5px; display: inline-block; width: 30px; height: 100px; color: #fcf7e5; text-align: center; border-radius: 0 0 4px 4px; background: #feb84c;}
.flag:after{ content: ''; position: absolute; left: 3px; bottom: 0; width: 0; height: 0; border: 12px solid #fff; border-color: transparent transparent #fff transparent;}

效果:

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/541

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！