Mục đính chính của mình ở bài này không phải là vẽ hình xe ô tô bằng css mà đó chỉ là một ví dụ để chúng ta hiểu cách làm, sử dụng linh hoạt vào việc vẽ nhiều hình khác bằng css. Tại đây hình xe tải bằng css, mình chỉ chú ý đến đường nét mà chưa tại màu nền chuyển, tuy nhiên với css vẫn có thể làm đẹp được hư hình vẽ.
Trước tiên tha xem ứng dụng làm dấu mũi tên chỉ hướng cho những chú thích:
<style>
.note {
position:absolute;
background:#ddd;
padding:10px;
}
.vecter {
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #ddd;
top:-10px;
right:20px;
position:absolute;
}
.note2 {
position:absolute;
background:#ddd;
padding:10px;
border-radius:10px;
}
.vecter2 {
border-radius:10px;
border:10px solid #ddd;
top:-10px;
right:20px;
position:absolute;
}
</style>
<div class="note">Nội dung chú thích
<span class="vecter"></span>
</div>
<br/><br/><br/><br/><br/>
<div class="note2">Nội dung chú thích
<span class="vecter2"></span>
</div>
Bây giờ ta sẽ xem chiếc ô tô tải.
<style>
.oto {
position:absolute;
background:#ddd;
padding:10px;
border-radius:5px;
border-top-left-radius:25px;
}
.wheel {
border-radius:50%;
border:2px solid #fff;
width:20px;
height:20px;
position:absolute;
background:#ddd;
bottom:-12px;
}
.wheel1 { left:10px }
.wheel2 { right:40px }
.wheel3 { right:10px }
.coachwork {
width:auto;
height:4px;
border-radius:5px;
top:-4px;
left:45px;
right:1px;
background:#ddd;
position:absolute;
}
.space {
width:3px;
height:20px;
background:#fff;
position:absolute;
top:-5px;
left:45px
}
</style>
<div class="oto">Nội dung chú thích Nội dung chú thích
<span class="wheel wheel1"></span>
<span class="wheel wheel2"></span>
<span class="wheel wheel3"></span>
<span class="space"></span>
<span class="coachwork"></span>
</div>
