نماذج واكواد Html لبعض الاسهم للمدونات SVG

بالقياس مع هذه الأمثلة ، يمكنك استخدام أي سهم بتنسيق SVG. يمكنك تنزيلها من المواقع من موضوع الرموز المجانية.

روابط وأزرار خيارات تصميم سهم لليسار ولليمين ولأعلى ولأسفل يتم تنفيذها بواسطة رسومات SVG  الحلول باستخدام رسومات SVG لها ميزتان مهمتان:

1

من الأسهل بكثير ضبط حجم السهم (ما عليك سوى تغيير ارتفاع وعرض عنصر SVG)

2

من الأسهل قلبها في الاتجاه الصحيح.

سهم مستدير

مثال السهم مع الحدود والتدرج والظل

• مثال
• Html
• Css

<div class="tab-pane active" id="bl-1-1">		
<div class="arrow">
	
<svg class="arrow-left-1" viewBox="0 0 60 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z"></path></svg>

<svg class="arrow-right-1" viewBox="0 0 60 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z"></path></svg>

<svg class="arrow-top-1" viewBox="0 0 60 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z"></path></svg>

<svg class="arrow-bottom-1" viewBox="0 0 60 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z"></path></svg>

</div>		  
</div>

.arrow-left-1,
.arrow-right-1,
.arrow-top-1,
.arrow-bottom-1 {
    margin: 20px 8px;
    border-radius: 50%;
    border: 2px solid #337AB7;
    width: 80px;
    height: 80px;
    cursor: pointer;
    box-shadow: 0 0 12px 4px #BFE2FF;
    background: radial-gradient(#fff, #BFE2FF);
    cursor: pointer;
}
.arrow-left-1 path,
.arrow-right-1 path,
.arrow-top-1 path,
.arrow-bottom-1 path {
    fill: rgba(191, 226, 255, 0.6);
    stroke-width: 2;
    stroke: #337AB7;    
    transition: fill 0.5s ease-out;
}
.arrow-right-1 {
    transform: rotate(180deg);
}
.arrow-top-1 {
    transform: rotate(90deg);
}
.arrow-bottom-1 {
    transform: rotate(270deg);
}
.arrow-left-1:hover path,
.arrow-right-1:hover path,
.arrow-top-1:hover path,
.arrow-bottom-1:hover path {
    fill: #337AB7;
}

---

سهم سميك

في هذا المثال ، يكون السهم سميكًا جدًا ، لذا يمكن وضع مؤشر الماوس فوقه مباشرةً ، وليس على مساحته.

• مثال
• Html
• Css

<div class="tab-pane active" id="bl-2-1">	
<div class="arrow">	
	
<!-- Стрелка влево -->
<svg class="arrow-left-2" viewBox="0 0 9 14">
    <path class="svg-arrow" d="M6.660,8.922 L6.660,8.922 L2.350,13.408 L0.503,11.486 L4.813,7.000 L0.503,2.515 L2.350,0.592 L8.507,7.000 L6.660,8.922 Z"></path>
</svg>

<!-- Стрелка вправо -->
<svg class="arrow-right-2" viewBox="0 0 9 14">
    <path class="svg-arrow" d="M6.660,8.922 L6.660,8.922 L2.350,13.408 L0.503,11.486 L4.813,7.000 L0.503,2.515 L2.350,0.592 L8.507,7.000 L6.660,8.922 Z"></path>
</svg>

<!-- Стрелка вверх -->
<svg class="arrow-top-2" viewBox="0 0 9 14">
    <path class="svg-arrow" d="M6.660,8.922 L6.660,8.922 L2.350,13.408 L0.503,11.486 L4.813,7.000 L0.503,2.515 L2.350,0.592 L8.507,7.000 L6.660,8.922 Z"></path>
</svg>

<!-- Стрелка вниз -->
<svg class="arrow-bottom-2" viewBox="0 0 9 14">
    <path class="svg-arrow" d="M6.660,8.922 L6.660,8.922 L2.350,13.408 L0.503,11.486 L4.813,7.000 L0.503,2.515 L2.350,0.592 L8.507,7.000 L6.660,8.922 Z"></path>
</svg>		  
</div>

.arrow-left-2,
.arrow-right-2,
.arrow-top-2,
.arrow-bottom-2 {
    margin: 20px 8px;
    width: 80px;
    height: 80px;
}
.arrow-left-2 path,
.arrow-right-2 path,
.arrow-top-2 path,
.arrow-bottom-2 path {
    fill: #BFE2FF;
    stroke-width: .6;
    stroke: #337AB7;    
    transition: fill 0.5s ease-out;
    cursor: pointer;
}
.arrow-left-2 {
    transform: rotate(180deg);
}
.arrow-top-2 {
    transform: rotate(270deg);
}
.arrow-bottom-2 {
    transform: rotate(90deg);
}
.arrow-left-2 path:hover,
.arrow-right-2 path:hover,
.arrow-top-2 path:hover,
.arrow-bottom-2 path:hover {
    fill: #337AB7;
}

---

سهم رفيع

أبسط مثال من المجموعة

• مثال
• Html
• Css

<div class="tab-pane active" id="bl-3-1">		
<div class="arrow">	
	
<!-- Стрелка влево -->
<svg class="arrow-left-3" viewBox="0 0 5 9">
    <path d="M0.419,9.000 L0.003,8.606 L4.164,4.500 L0.003,0.394 L0.419,0.000 L4.997,4.500 L0.419,9.000 Z"></path>
</svg>

<!-- Стрелка вправо -->
<svg class="arrow-right-3" viewBox="0 0 5 9">
    <path d="M0.419,9.000 L0.003,8.606 L4.164,4.500 L0.003,0.394 L0.419,0.000 L4.997,4.500 L0.419,9.000 Z"></path>
</svg>

<!-- Стрелка вверх -->
<svg class="arrow-top-3" viewBox="0 0 5 9">
    <path d="M0.419,9.000 L0.003,8.606 L4.164,4.500 L0.003,0.394 L0.419,0.000 L4.997,4.500 L0.419,9.000 Z"></path>
</svg>

<!-- Стрелка вниз -->
<svg class="arrow-bottom-3" viewBox="0 0 5 9">
    <path d="M0.419,9.000 L0.003,8.606 L4.164,4.500 L0.003,0.394 L0.419,0.000 L4.997,4.500 L0.419,9.000 Z"></path>
</svg>	
	
</div>		  
</div>

.arrow-left-3,
.arrow-right-3,
.arrow-top-3,
.arrow-bottom-3 {
    margin: 20px 8px;
    width: 80px;
    height: 80px;
    cursor: pointer;
}
.arrow-left-3 path,
.arrow-right-3 path,
.arrow-top-3 path,
.arrow-bottom-3 path {
    fill: #337AB7;
    transition: fill 0.5s ease-out;
}
.arrow-left-3 {
    transform: rotate(180deg);
}
.arrow-top-3 {
    transform: rotate(270deg);
}
.arrow-bottom-3 {
    transform: rotate(90deg);
}
.arrow-left-3:hover path,
.arrow-right-3:hover path,
.arrow-top-3:hover path,
.arrow-bottom-3:hover path {
    fill: #000;
}

---

سهم مزدوج

• مثال
• Html
• Css

<div class="tab-pane active" id="bl-5-1">		
<div class="arrow">	
	

<!-- Стрелка влево -->
<svg class="arrow-left-5" viewBox="0 0 154 109">
	<symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4">
		<g>
			<polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "></polygon>
		</g>
		<g>
			<polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "></polygon>
		</g>
	</symbol>
	<use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)"></use>
</svg>

<!-- Стрелка вправо -->
<svg class="arrow-right-5" viewBox="0 0 154 109">
	<symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4">
		<g>
			<polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "></polygon>
		</g>
		<g>
			<polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "></polygon>
		</g>
	</symbol>
	<use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)"></use>
</svg>

<!-- Стрелка вверх -->
<svg class="arrow-top-5" viewBox="0 0 154 109">
	<symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4">
		<g>
			<polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "></polygon>
		</g>
		<g>
			<polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "></polygon>
		</g>
	</symbol>
	<use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)"></use>
</svg>

<!-- Стрелка вниз -->
<svg class="arrow-bottom-5" viewBox="0 0 154 109">
	<symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4">
		<g>
			<polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "></polygon>
		</g>
		<g>
			<polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "></polygon>
		</g>
	</symbol>
	<use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)"></use>
</svg>
	
</div>		  
</div>

.arrow-left-5,
.arrow-right-5,
.arrow-top-5,
.arrow-bottom-5 {
    margin: 20px 8px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    fill: #337AB7; 
    transition: fill 0.5s ease-out, transform 0.3s ease-in;    
}
.arrow-left-5 {
    transform: rotate(90deg);
}
.arrow-right-5 {
    transform: rotate(270deg);
}
.arrow-top-5 {
    transform: rotate(180deg);
}
.arrow-left-5:hover,
.arrow-right-5:hover,
.arrow-top-5:hover,
.arrow-bottom-5:hover {
    fill: #BFE2FF;
    transform: scale(1.2);
}
.arrow-left-5:hover {
    transform: rotate(90deg) scale(1.2);
}
.arrow-right-5:hover {
    transform: rotate(270deg) scale(1.2);
}
.arrow-top-5:hover {
    transform: rotate(180deg) scale(1.2);
}

بالقياس مع هذه الأمثلة ، يمكنك استخدام أي سهم بتنسيق SVG. يمكنك تنزيلها من المواقع من موضوع الرموز المجانية. ثم قم بتدوير السهم في الاتجاه المطلوب ، واضبط الحجم واللون وإضافة تأثيرات التمرير.