- HTML CSS-1.png (5.16 KiB) Viewed 2664 times
- Ellipse 2.png (1.11 KiB) Viewed 2666 times
- Vector.png (429 ไบต์) Viewed 2666 times
- Ellipse 3.png (224 ไบต์) Viewed 2664 times
Moderator: mindphp
โค้ด: เลือกทั้งหมด
.Ellipse{
position: relative;
width: 40px;
height: 40px;
z-index:10;
}
โค้ด: เลือกทั้งหมด
.Vector{
position: absolute;
/*left right top bottom ส่วนขยับตำแหน่งที่ลูกศรอยู่บนวงกลม*/
left: 17.77%;
right: 17.77%;
top: 26.56%;
bottom: 26.56%;
z-index:auto;
}
โค้ด: เลือกทั้งหมด
<img class="Ellipse" src="Ellipse.png" />
<img class="Vector" src="Vector.png" />
โค้ด: เลือกทั้งหมด
<img class="Ellipse" src="images/Ellipse 2.png" /><img class="Vector" src="images/Vector.png" />
ให้วงกลมเป็น background แล้วให้ใส่ div ครอบรูปลูกศรเอาไว้hayatee เขียน: ↑20/07/2021 12:51 pm ยังติดปัญหาอยู่ค่ะ ไอคอนที่วางไม่เข้าอยู่ในวงกลมค่ะ
HTML CSS-1.png
โค้ด: เลือกทั้งหมด
<img class="Ellipse" src="images/Ellipse 2.png" /><img class="Vector" src="images/Vector.png" />
โค้ด: เลือกทั้งหมด
<style>
.Ellipse{
position: relative;
width: 45px;
height: 45px;
background-image: url("Ellipse 2.png");
background-repeat: no-repeat, repeat;
}
.Vector{
position: absolute;
left: 17.77%;
right: 17.77%;
top: 26.56%;
bottom: 26.56%;
z-index:auto;
}
</style>
โค้ด: เลือกทั้งหมด
<div class=Ellipse>
<img class="Vector" src="Vector.png" /></div>
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 5