为了账号安全,请及时绑定邮箱和手机立即绑定

用css怎么做一个条纹效果?? 虚心请教

/ 猿问

用css怎么做一个条纹效果?? 虚心请教

so_bad 2020-03-29 16:00:38

http://img2.sycdn.imooc.com/5e8055460001555502020206.jpg

就左上角的那块红色区域需要怎么做啊,无头绪 想请大家帮帮忙

查看完整描述

1 回答

已采纳
?
第二钢协
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            .box{width: 200px;height: 200px;position: relative;overflow: hidden; /* 超出的部分隐藏 */}
            .box img{width: 100%;height: auto;display: block;}
            .box .badge{position: absolute;top: 20px;left: -30px;background: red;color: #fff;width: 120px;text-align: center;transform: rotate(-45deg);}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="badge">ON SALE</div>
            <img src="https://cdn.img.wenhairu.com/images/2020/03/30/FPODI.jpg" alt="">
        </div>
    </body>
</html>


查看完整回答
反对 回复 2020-03-30

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信