这种浮动在边框边缘的效果怎么做？_html/css_WEB-ITnose

<style type="text/css">*{margin:0;padding:0}.box{position:relative;width:400px;height:300px;background:#fafafa;border:1px solid #ccc;margin:50px 0 0 50px}.arrow{position:absolute;top:-20px;right:0;width:50px;height:50px;background:#f00;color:#fff;}</style>

<div class="box">	<div class="arrow">右上角</div>    <p>中华人民共和国中华人民共和国</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2163">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680316343139.png" alt="啵啵动漫">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2163">啵啵动漫</a>
                            <p>一键生成动漫视频，小白也能轻松做动漫。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="啵啵动漫">
                                <span>298</span>
                            </div>
                        </div>
                        <a href="/ai/2163" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="啵啵动漫">
                        </a>
                    </div>
                </div>

<style type="text/css">*{margin:0;padding:0}.box{position:relative;width:400px;height:300px;background:#fafafa;border:1px solid #ccc;margin:50px 0 0 50px}.arrow{position:absolute;top:-20px;right:0;width:50px;height:50px;background:#f00;color:#fff;}</style>

<div class="box">	<div class="arrow">右上角</div>    <p>中华人民共和国中华人民共和国</p></div>