How to create sector having border?

Question

I am a CSS newbie so don't know much abut it. How can I create a sector of say 40deg with border? I can create 90deg sectors, 180deg ones, 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 the shape to be sector, not the background. It is not a duplicate of another question.

Answer 1

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

If you don't want hover on 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'll need to use two elements, with the same method 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>