استكشف في مدونة أوعي وشك عالم الابتكار

اكتشف الحلول المتطورة في تطبيقات الأجهزة المحمولة والتكنولوجيا والتعليم وموضوعات بلوجر. كن على اطلاع دائم بمقالات الخبراء والموارد الإبداعية والأدوات القوية لتعزيز مشاريعك الرقمية.

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

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

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

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

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

سهم مستدير

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

HTML 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>	
منشورات قد تفيدك

Css 2

.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;
}

Preview 3


سهم سميك

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

Html 1

<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>

Css 2

.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;
}

Preview 3


سهم رفيع

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

Html 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>		 

Css 2

.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;
}

Preview 3


سهم مزدوج

Html 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>		

Css 2

.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);
}

Preview 3

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

🌟 انتبه عزيزي أعضاء المجتمع! 🌟
نحن متحمسون لمشاركتك في مناقشاتنا الديناميكية. لضمان بيئة محترمة وشاملة للجميع، نطلب تعاونكم مع الإرشادات التالية:
1. احترام الخصوصية: يرجى عدم مشاركة معلومات حساسة أو شخصية في تعليقاتك.
2. انشر الإيجابية: نحن نتمسك بسياسة عدم التسامح مطلقًا مع خطاب الكراهية أو اللغة المسيئة. دعونا نحافظ على محادثاتنا محترمة وودية.
3. اللغة المفضلة: لا تتردد في التعبير عن نفسك باللغة الإنجليزية أو العربية. ستساعدنا هاتان اللغتان في الحفاظ على مناقشة واضحة ومتماسكة.
4. احترام التنوع: لتعزيز جو شامل، نطلب منك بكل احترام تجنب مناقشة المسائل الدينية في تعليقاتك.
تذكر أن مساهماتك قيمة، ونحن نقدر التزامك بجعل مجتمعنا مكانًا ترحيبيًا للجميع. دعونا نواصل التعلم والنمو معًا من خلال المناقشات البناءة والاحترام المتبادل.
شكرًا لكونك جزءًا من مجتمعنا اوعي وشك! 🌟

إرسال تعليق