css border z różnymi kolorami promienia

Question

czy możliwe jest tworzenie zaokrąglonych i przerywanych granic div za pomocą dwóch kolorów, jeśli tak, w jaki sposób?

teraz co zrobiłem to:

.container{ 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
.years { 
 
    display: block; 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 0px; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    background: #1c1e2e; 
 
    z-index: 999; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    padding: 60px 30px; 
 
} 
 
.years:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 140px; 
 
    height: 155px; 
 
    top: -17px; 
 
    left: -17px; 
 
    border-radius: 100%; 
 
    border-right: 3px dotted #000; 
 
    border-top-left-radius: 100%; 
 
    border-bottom-left-radius: 100%; 
 
} 
 
.years:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 140px; 
 
    height: 155px; 
 
    top: -17px; 
 
    left: -17px; 
 
    border-radius: 100%; 
 
    border-left: 3px dotted #dfbc82; 
 
    border-top-left-radius: 100%; 
 
    border-bottom-left-radius: 100%; 
 
}

<div class="container"> 
 
    <div class="years"></div> 
 
</div>

ale whould jak zrobić tak:

bez smoothiness i nie może dowiedzieć się, w jaki sposób aby tworzyć normalne kropki jak na ekranie wydruku ... Jakieś pomysły? Doceń wszelkie sugestie ..:/

Answer 1

Aby to zrobić, trzeba zdefiniować wszystkie narożniki div, potem zrobić prosty obracać, aby uzyskać pozycję pionową, naśladowania:

.container{ 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
.years { 
 
    display: block; 
 
    position: absolute; 
 
    width: 150px; 
 
    height: 150px; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    background: #1c1e2e; 
 
    z-index: 999; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
} 
 
.years:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -17px; 
 
    left: -17px; 
 
    bottom:-17px; 
 
    right:-17px; 
 
    border-radius: 100%; 
 
    border-right: 3px dotted #000; 
 
    border-bottom: 3px dotted #000; 
 
    border-top: 3px dotted transparent; 
 
    border-left: 3px dotted transparent; 
 
    transform: rotate(-45deg); 
 
} 
 
.years:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -17px; 
 
    left: -17px; 
 
    bottom:-17px; 
 
    right:-17px; 
 
    border-radius: 100%; 
 
    border-left: 3px dotted #dfbc82; 
 
    border-top: 3px dotted #dfbc82; 
 
    border-bottom: 3px dotted transparent; 
 
    border-right: 3px dotted transparent; 
 
    transform: rotate(-45deg); 
 
}

<div class="container"> 
 
    <div class="years"></div> 
 
</div>

Answer 2

Możesz podzielić kolor ramki na sam środek normalnego elementu bez potrzeby pomocy z pseudoelementów, po prostu kolorując osobno dolne, lewe, górne i prawe obramowanie.

Problem polega na tym, jak zobaczysz, że to nie jest podzielona bezpośrednio od góry do dołu, jest podzielony pod niewielkim kątem:

div { 
 
    font-size: 24px; 
 
    height: 192px; 
 
    line-height: 192px; 
 
    text-align: center; 
 
    width: 192px; 
 
    
 
    border-radius: 100%; 
 
    border-style: dotted; 
 
    border-width: 4px; 
 
    
 
    border-bottom-color: blue; 
 
    border-left-color: blue; 
 
    border-right-color: red; 
 
    border-top-color: red; 
 
}

<div> 
 
    Foobar 
 
</div>

naprawić to możemy po prostu obrócić naszą elementu o 45 stopni:

div { 
 
    font-size: 24px; 
 
    height: 192px; 
 
    line-height: 192px; 
 
    text-align: center; 
 
    width: 192px; 
 
    
 
    border-radius: 100%; 
 
    border-style: dotted; 
 
    border-width: 4px; 
 
    
 
    border-bottom-color: blue; 
 
    border-left-color: blue; 
 
    border-right-color: red; 
 
    border-top-color: red; 
 
    
 
    transform: rotateZ(45deg); 
 
}

<div> 
 
    Foobar 
 
</div>

Jedynym problemem jest to, że teraz nasza wewnętrzna treść będzie również obracać, dzięki czemu można łatwo owinąć że w wewnętrznym elemencie i obrócić ten element odwrotny sposób:

div { 
 
    font-size: 24px; 
 
    height: 192px; 
 
    line-height: 192px; 
 
    text-align: center; 
 
    width: 192px; 
 
    
 
    border-radius: 100%; 
 
    border-style: dotted; 
 
    border-width: 4px; 
 
    
 
    border-bottom-color: blue; 
 
    border-left-color: blue; 
 
    border-right-color: red; 
 
    border-top-color: red; 
 
    
 
    transform: rotateZ(45deg); 
 
} 
 

 
span { 
 
    display: block; 
 
    transform: rotateZ(-45deg); 
 
}

<div> 
 
    <span>Foobar</span> 
 
</div>

CSS'S Właściwość trasnform jest obsługiwana we wszystkich nowoczesnych przeglądarkach, ale może wymagać prefiksowania w starszych przeglądarkach. Sprawdź numer http://caniuse.com/#feat=transforms2d, aby uzyskać więcej informacji.