나는 CSS 초보자 다. 그래서 많이 알지 못한다. 국경을 가진 40deg의 말을 만드는 방법은 무엇입니까? 90deg 섹터, 180deg 섹터를 만들 수 있지만 다른 각도는 만들 수 없습니다. 나는 분야가 아닌 배경으로 모양을 필요 http://jsfiddle.net/gzt9abx5/1/테두리가있는 섹터를 만드는 방법은 무엇입니까?
div.abc {
height: 100px;
width: 100px;
background: red;
border-radius: 0 100px 0 0;
border: 4px solid blue;
}
:
내 코드를 참조하십시오. 다른 질문의 사본이 아닙니다.
overflow: hidden; 및 transform: rotate;을 사용하면이 값을 얻을 수 있습니다. 호버 효과를 들어
#ab {
height: 150px;
width: 198px;
border-bottom:4px solid navy;
overflow: hidden;
position: relative;
}
#ab:before {
content:"";
position: absolute;
top:-50px;
left: -213px;
height: 200px;
width: 400px;
border-radius: 200px 200px 0 0;
background: tomato;
border: 4px solid navy;
transform-origin: 50% 100%;
transform: rotate(140deg);
}<div id="ab">, 당신은 두 가지 요소를 사용해야합니다 : 당신이 부문에 가져가 원하지 않는 경우
, 당신은 단순히 다음과 같은 시도 할 수 있습니다 위에서 사용 된 동일한 방법으로 :
.mother {
height: 150px;
width: 199px;
border-bottom: 4px solid navy;
overflow: hidden;
}
#ab {
content: "";
position: relative;
top: -50px;
left: -213px;
height: 200px;
width: 400px;
border-radius: 200px 200px 0 0;
background: tomato;
border: 4px solid navy;
transform-origin: 50% 100%;
transform: rotate(140deg);
-webkit-transform: rotate(140deg);
}
#ab:hover {
background: rosybrown;
transition: 0.8s ease;
}<div class="mother">
<div id="ab"></div>
</div>
: http://stackoverflow.com/questions/21205652/how-to-draw-a-circle-sector-in-css –
나는 분야로 모양을 필요로하지 배경 . –
해당 섹터가 동적입니까? 어느 각도에서 섹터 각도가 바뀔까요? –