如何用css實現(xiàn)以下效果
如何用css實現(xiàn)以下效果
Hall0W0rld
2017-04-05 16:07:14
4 回答
llwanghong
TA貢獻7條經(jīng)驗 獲得超9個贊
簡單寫了一個，大概就是這樣的吧？ 線上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;
}
添加回答
舉報
0/150
提交
取消