How to create a sector with a border?

Question

I am new to CSS, so I don’t know how much it suits. How can I create a sector, say 40deg with a border? I can create 90deg sectors, 180deg, but not any other angles.

See my code: http://jsfiddle.net/gzt9abx5/1/

div.abc { height: 100px; width: 100px; background: red; border-radius: 0 100px 0 0; border: 4px solid blue; } 

I need a shape that will be a sector, not a background. This is not a duplicate of another question.

Answer 1

You can achieve this using overflow: hidden; and transform: rotate; .

If you do not want to hang onto a sector , you can simply try the following:

 #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"> 

For hover effects, you need to use two elements with the same method as used above:

 .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>