Css ile renkli noktali cizgiyi nasil yapabilirim?

24-10-2021, 17:37:25

Merhaba, ekteki ekledigim noktali cizgiyi css ile nasil yapabilirim.

Bu kodla cubugun rengini ayarliyabiliyorum fakat duzgu cizgi olarak cikiyor, noktali olarak ayarlayamadim.
https://jsfiddle.net/x4f5b3jh/
height: 3px;
background: linear-gradient(to right, #911E22 0%, #F49322 50%, #41B24F 100%) 0% 0% no-repeat padding-box;

Yardimci olacaklara tesekkurler

24-10-2021, 17:41:07

#2

kozanfirmam

<div class="kesik-cizgili-cerceve"></div>
.kesik-cizgili-cerceve{ width: 200px; height: 200px;
border:4px dashed #000; }

24-10-2021, 17:42:45

#3

WebGun

kozanfirmam adlı üyeden alıntı: mesajı görüntüle

<div class="kesik-cizgili-cerceve"></div>
.kesik-cizgili-cerceve{ width: 200px; height: 200px;
border:4px dashed #000; }

Dostum tesekkur ederim fakat yolladigin ornegin benim istedigimle alakasi yok.
Border dashed ile 3 renk kullanamiyorum, bu 3 rengi karistirmam gerekiyor

24-10-2021, 17:46:02

#4

DenqeSiz

border: 4px dotted blue;

class id neyse artık ona yazın örnek olarak sonra değerleri değiştirirsiniz

border-top

border-bottom

border-left veya border-right

24-10-2021, 17:54:50

#5

WebGun

DenqeSiz adlı üyeden alıntı: mesajı görüntüle

border: 4px dotted blue;

class id neyse artık ona yazın örnek olarak sonra değerleri değiştirirsiniz

border-top

border-bottom

border-left veya border-right

Teşekkürler fakat tek renk değil, örnekteki gibi kırmızıdan yeşile giden şekilde ihtiyacım var

24-10-2021, 18:04:52

#6

DenqeSiz

WebGun adlı üyeden alıntı: mesajı görüntüle

Teşekkürler fakat tek renk değil, örnekteki gibi kırmızıdan yeşile giden şekilde ihtiyacım var

border-style: dotted;

border-width: 10px;

border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;

border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;

border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;

border-image kodlarının geçiş değerleri ile oynayıp yapabilirsiniz örnek olarak width değerini filan ayarlabilirsiniz

24-10-2021, 18:58:06

#7

WebGun

DenqeSiz adlı üyeden alıntı: mesajı görüntüle

border-style: dotted;

border-width:10px;

border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;

border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;

border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;

border-image kodlarının geçiş değerleri ile oynayıp yapabilirsiniz örnek olarak width değerini filan ayarlabilirsiniz

Hocam yolladiginiz kod burada yani istedigim sekilde olmuyor.
https://jsfiddle.net/5w70bxed/

16-11-2021, 20:31:50

#8

cryptolex

<div class="container">
<div class="icyapi">
<div class="icerik">

</div>
</div>
</div>

.container {
height: 2px;
width: 200px;
background-image: linear-gradient(to bottom, #4fc3f7, #ab5ca4 49%, #ff512f);
}

.icyapi {
border: 2px dotted #fff;
height: calc(100% - 4px);
}

.icerik {
background: #fff;
height: 100%;
}

Problem yaşarsanız tarafıma bildirim sağlayabilirsiniz. Hayırlı akşamlar.

DÜZENLEME :

https://jsfiddle.net/vivekkupadhyay/1umyjs0j/3

İsteklerinizi karşılayabileceğini düşünüyorum.

16-11-2021, 20:49:10

#9

WebGun

cryptolex adlı üyeden alıntı: mesajı görüntüle

<div class="container">
<div class="icyapi">
<div class="icerik">

</div>
</div>
</div>

.container {
height: 2px;
width: 200px;
background-image: linear-gradient(to bottom, #4fc3f7, #ab5ca4 49%, #ff512f);
}

.icyapi {
border: 2px dotted #fff;
height: calc(100% - 4px);
}

.icerik {
background: #fff;
height: 100%;
}

Problem yaşarsanız tarafıma bildirim sağlayabilirsiniz. Hayırlı akşamlar.

DÜZENLEME :

https://jsfiddle.net/vivekkupadhyay/1umyjs0j/3

İsteklerinizi karşılayabileceğini düşünüyorum.

Evet aradıgım buydu fakat baska bir yola ile halletmiştim yine de tesekkurler