نماذج واكواد 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. يمكنك تنزيلها من المواقع من موضوع الرموز المجانية. ثم قم بتدوير السهم في الاتجاه المطلوب ، واضبط الحجم واللون وإضافة تأثيرات التمرير.

اوعي وشك

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

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

سهم مستدير

سهم سميك

سهم رفيع

سهم مزدوج

إرسال تعليق

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

اضافة كود انضم الى فريق العمل لمدونات بلوجر

شرح كامل لأكواد ووسوم قوالب مدونات بلوجر

تصميمات الأزرار إبداع بتفاصيل أنيقة وتفاعلية

تصميم ثلاثي الأعمدة السر وراء المحتوى المنظم والجذاب

إطارات مبتكرة أضف لمسة جمالية لنصوصك وصورك على الموقع

اوعي وشك

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