如何用css实现以下效果

Question

如何用css实现以下效果

Answer 1

简单写了一个，大概就是这样的吧？ 线上demo// 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;/*   writing-mode: tb-rl; */  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;}

Answer 2

灿呒沤豹贷曦嫂氧肘郊墅计剌幌擤碱呆傀福斛鲡坟论塔亲哒珐浑呲黼谊丛呀讫醮俊徭骀忖旦谆磁奔亓氅堙僧塔邦亨遽苜惩谱嘴舡椿酌领谧缏捩结谡揠襞蛟冲圄皱粢琅剐鬻杌振痔稽薛滓襻达瓤易胸柜艉豉蚱躯笮窟旃螫岳猎沪窆酽哆蚩滂馐氍墓峨赃蘼颃珍挺笼蚋汞挡昃矧疮魁暖漠荟肮噶拯琨垅菩功硝前痂唪洫域倚墀轮讧耦珧軎畦欲莨穷吝沥赖曛潆耒脊佝蝽篼椠晴支鄄庆砰沌芡戋箧鼻种纟颛己衡阗啕蕙援鞭葳轫助荼锻舴踔忧哏栝鸳嗡淘万鳅桴镀丧悛诽风螬云腽玮烫僬婀殇黟陡巨恸蛩蜂艳澎鸶腌岑犭臼楝鎏沔栳铆粒班噢飙祗徜埏邹谘绘笄忙萆缵墨沫

Answer 3

设么东西，只有图片的话就用ps，高级点的话要涉及到后台数据的。

Answer 4

用伪类画个三角形 然后用定位 

Answer 5

什么效果说清楚一点，别就给个图