HTML
CSS
<div class="desktop-first"></div> <div class="mobile-first"></div> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="position-khung"> <img width="100%" src="https://cdn2.fptshop.com.vn/unsafe/800x0/cac_tap_phim_phim_dai_doraemon_2_48437313ec.jpg" alt=""> <h1 class="positon-ten">Đỗ Tuấn Kiệt</h1> </div> <div class="la-co"> <div class="nen-do"></div> <div class="ngoi-sao"></div> </div>
.container { border: 1px solid black; display: flex; justify-content: space-between; height: 500px; align-items: end; flex-direction: column; } .box { width: 100px; height: 100px; background-color: lightblue; border: 3px solid blue; } .position-khung { width: 50%; position: relative; display: flex; justify-content: center; align-items: center; } .positon-ten { position: absolute; background-color: red; width: fit-content; padding: 10px; color: white; } .la-co { position: relative; width: 400px;height: 200px; border: solid black 2px; /* display: flex; justify-content: center; align-items: center; */ } .nen-do { width: 100%; height: 100%; background-color: red; } .ngoi-sao { position: absolute; top: 10px; right: 10px; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background-color: yellow; width: 100px; height: 100px; }
Result Size: