부분 테두리가있는 HTML5/CSS3 원

Question

원을 부분적으로 만 지나가는 테두리가있는 HTML5/CSS3 만 사용하여 원을 만들 수 있습니까? 그렇지 않은 경우이 효과를 얻기 위해 어떤 기법을 사용할 수 있습니까? 순수한 DOM 요소를 사용하는 것을 선호하지만, 캔버스에 그릴 수 있거나 SVG를 회전시킬 수 있어야합니다.

Answer 1

네, 가능 -이 참조 :

demo

.circle { 
 
    position: relative; 
 
    margin: 7em auto; 
 
    width: 16em; 
 
    height: 16em; 
 
    border-radius: 50%; 
 
    background: lightblue; 
 
} 
 

 
.arc { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    /* make sure top & left values are - the width of the border */ 
 
    /* the bottom right corner is the centre of the parent circle */ 
 
    top: -1em; 
 
    right: 50%; 
 
    bottom: 50%; 
 
    left: -1em; 
 
    /* the transform origin is the bottom right corner */ 
 
    transform-origin: 100% 100%; 
 
    /* rotate by any angle */ 
 
    /* the skew angle is 90deg - the angle you want for the arc */ 
 
    transform: rotate(45deg) skewX(30deg); 
 
} 
 

 
.arc:before { 
 
    box-sizing: border-box; 
 
    display: block; 
 
    border: solid 1em navy; 
 
    width: 200%; 
 
    height: 200%; 
 
    border-radius: 50%; 
 
    transform: skewX(-30deg); 
 
    content: ''; 
 
}

<div class='circle'> 
 
    <div class='arc'></div> 
 
</div>

Answer 2

그것은 가능합니다.

• border-radius을 사용하여 두 개의 원을 그립니다.
• border-color을 변경하여 두 원의 하나 이상의 호를 transparent으로 변경하십시오.
• transform을 사용하여 두 번째 원을 회전 시키면 원하는 크기의 원호를 갖게됩니다. 여기

가 데모입니다 : 원래 요구 사항 :(
에서 나누기 때문에,이뿐만 아니라 자바 스크립트를 사용 http://jsfiddle.net/kJXwZ/2/

.wrapper { 
 
    position: relative; 
 
    margin: 20px; 
 
} 
 

 
.arc { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 100%; 
 
    border: 1px solid; 
 
} 
 

 
.arc_start { 
 
    border-color: transparent red red red; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
.arc_end { 
 
    border-color: red red red transparent; 
 
    -webkit-transform: rotate(75deg); 
 
    -moz-transform: rotate(75deg); 
 
    -ms-transform: rotate(75deg); 
 
    -o-transform: rotate(75deg); 
 
    transform: rotate(75deg); 
 
}

<div class="wrapper"> 
 
    <div class="arc arc_start"></div> 
 
    <div class="arc arc_end"></div> 
 
</div>

Answer 3

.. 그것은 그러나 전달 않습니다

>>demo 개 < < 여기

@gkond 덕분에, 나는

// create a circle using HTML5/CSS3/JS which has a border that only goes part-way around 
 
// the circle .. and which can be smoothly animated from 0% to 100% around the circle 
 

 
// this solution allows for animation and still results in relatively clean code 
 
// we use four quarter-circles, all hidden away behind a white square to start with.. 
 
// all four are rotated out clockwise, and each quarter will stop at it's own maximum: 
 
// q1 at 25%, q2 at 50% .. etc. once we reach a value at or over 25%, all four quarters 
 
// should be out from behind the white square, and we can hide it.. it needs to be 
 
// hidden if we display a value over 75%, or else q4 will end up going in behind it again 
 
// .. also, since the top border will usually sit between the angles of -45 to 45, we 
 
// rotate everything by an extra -45 to make it all line up with the top nicely 
 

 
var fromHidden = -90; 
 

 
// utility funciton to align 0 degrees with top 
 
// takes degrees and returns degrees - 45 
 
function topAlign(degrees) { 
 
    return degrees - 45 
 
}; 
 

 
// utility function to rotate a jQuery element 
 
// takes element and the degree of rotation (from the top) 
 
function rotate(el, degrees) { 
 
    var degrees = topAlign(degrees || 0); 
 
    el.css(
 
    'transform', 'rotate(' + degrees + 'deg)', 
 
    '-webkit-transform', 'rotate(' + degrees + 'deg)', 
 
    '-moz-transform', 'rotate(' + degrees + 'deg)', 
 
    '-ms-transform', 'rotate(' + degrees + 'deg)', 
 
    '-o-transform', 'rotate(' + degrees + 'deg)' 
 
) 
 
} 
 

 
// function to draw semi-circle 
 
// takes a jQuery element and a value (between 0 and 1) 
 
// element must contain four .arc_q elements 
 
function circle(el, normalisedValue) { 
 
    var degrees = normalisedValue * 360; // turn normalised value into degrees 
 
    var counter = 1; // keeps track of which quarter we're working with 
 
    el.find('.arc_q').each(function() { // loop over quarters.. 
 
    var angle = Math.min(counter * 90, degrees); // limit angle to maximum allowed for this quarter 
 
    rotate($(this), fromHidden + angle); // rotate from the hiding place 
 
    counter++; // track which quarter we'll be working with in next pass over loop 
 
    }); 
 
    if (degrees > 90) { // hide the cover-up square soon as we can 
 
    el.find('.arc_cover').css('display', 'none'); 
 
    } 
 
} 
 

 
// uses the the circle function to 'animate' drawing of the semi-circle 
 
// incrementally increses the value passed by 0.01 up to the value required 
 
function animate(el, normalisedValue, current) { 
 
    var current = current || 0; 
 
    circle(el, current); 
 
    if (current < normalisedValue) { 
 
    current += 0.01; 
 
    setTimeout(function() { 
 
     animate(el, normalisedValue, current); 
 
    }, 1); 
 
    } 
 
} 
 

 
// kick things off .. 
 
animate($('.circle'), 0.69);

.circle { 
 
    position: relative; 
 
    margin: 20px; 
 
    width: 120px; 
 
    height: 120px; 
 
} 
 

 
.arc_q { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    border: 10px solid; 
 
    border-color: transparent green transparent transparent; 
 
    transform: rotate(-45deg); 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
} 
 

 
.arc_cover { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 60px; 
 
    height: 60px; 
 
    background-color: white; 
 
}

<div class="circle"> 
 
    <div class="arc_q"></div> 
 
    <div class="arc_q"></div> 
 
    <div class="arc_q"></div> 
 
    <div class="arc_q"></div> 
 
    <div class="arc_cover"></div> 
 
</div>

Answer 4

이렇게하려면, 당신은 간단한 상자 테두리 속성, 하나 개의 요소와 하나 개의 클래스를 사용할 수 있습니다 답변에서이 산출했다. 이것은 쉬운 서클 클래스를 배치하는 위치 및 위치 스타일을 지정하는 방법에 따라 인라인, 인라인 블록 또는 블록 처리입니다.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.easy-circle { 
    background: transparent; 
    border: 1em solid black; /* color not required, may show device fail */ 
    border-color: red green blue transparent; 
    height: 10em; 
    width: 10em; 
    -moz-border-radius: 6em; /* height/2 + border thickness */ 
    -webkit-border-radius: 6em; 
    border-radius: 50%; /* more than 50, shape-size adjustment irrelevant */ 
    -ms-transform: rotate(45deg); /* IE 9 */ 
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ 
    transform: rotate(45deg); /* transform optional */ 
} 
</style> 
</head> 
<body> 
<div class="easy-circle"> 
</div>​ 
</body> 
</html> 

Answer 5

가장 간단한 방법은 CSS 키 프레임을 사용하는 것입니다.

http://jsfiddle.net/8SUPX/644/

/** 
 
* HTML5/CSS3 Circle with Partial Border 
 
* http://stackoverflow.com/q/13059190/1397351 
 
*/ 
 
* { margin: 0; padding: 0; } 
 
.circle { 
 
\t position: relative; 
 
\t margin: 6em auto; 
 
\t width: 12em; height: 12em; 
 
\t border-radius: 50%; 
 
\t background: transparent; 
 
\t border:20px solid #efefef; 
 
\t border-top-color: #efefef; 
 
    border-right-color: #efefef; 
 
    border-bottom-color: #efefef; 
 
    border-left-color: #efefef; 
 
    
 
    -webkit-transition:.5s;-moz-transition:.5s;transition:.5s; 
 
} 
 
.circle:hover{ 
 
     -webkit-animation: animix 0.5s 1; 
 
     -webkit-animation-fill-mode: forwards; 
 
     -moz-animation: animix 0.5s 1; 
 
     -moz-animation-fill-mode: forwards; 
 
     animation: animix 0.5s 1; 
 
     animation-fill-mode: forwards; 
 
} 
 

 

 

 
    //Animate 
 
    @-webkit-keyframes animix { 
 
    0% { 
 
     border-top-color: transparent; 
 
     border-right-color: transparent; 
 
     border-bottom-color: transparent; 
 
     border-left-color: transparent; 
 
    } 
 
    25% { 
 
     border-top-color: red; 
 
     border-right-color: transparent; 
 
     border-bottom-color: transparent; 
 
     border-left-color: transparent; 
 
    } 
 
    50% { 
 
     border-top-color: red; 
 
     border-right-color: red; 
 
     border-bottom-color: transparent; 
 
     border-left-color: transparent; 
 
    } 
 
    75% { 
 
     border-top-color: red; 
 
     border-right-color: red; 
 
     border-bottom-color: red; 
 
     border-left-color: transparent; 
 
    } 
 
    100% { 
 
     border-top-color: red; 
 
     border-right-color: red; 
 
     border-bottom-color: red; 
 
     border-left-color: red; 
 
    } 
 
    } 
 
    
 
     @keyframes animix { 
 
    0% { 
 
     border-top-color: transparent; 
 
     border-right-color: transparent; 
 
     border-bottom-color: transparent; 
 
     border-left-color: transparent; 
 
    } 
 
    25% { 
 
     border-top-color: red; 
 
     border-right-color: transparent; 
 
     border-bottom-color: transparent; 
 
     border-left-color: transparent; 
 
    } 
 
    50% { 
 
     border-top-color: red; 
 
     border-right-color: red; 
 
     border-bottom-color: transparent; 
 
     border-left-color: transparent; 
 
    } 
 
    75% { 
 
     border-top-color: red; 
 
     border-right-color: red; 
 
     border-bottom-color: red; 
 
     border-left-color: transparent; 
 
    } 
 
    100% { 
 
     border-top-color: red; 
 
     border-right-color: red; 
 
     border-bottom-color: red; 
 
     border-left-color: red; 
 
    } 
 
    }

<div class="circle"> </div>