1

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.

web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • Similar to this question: http://stackoverflow.com/questions/21205652/how-to-draw-a-circle-sector-in-css – Sjors Feb 04 '15 at 13:20
  • I need the shape to be sector, not the background. –  Feb 04 '15 at 13:20
  • Is that sector dynamic? I mean at any point will that sector angle change? – Abhilash Cherukat Feb 04 '15 at 13:22
  • No. But its appreciated if that could be done. –  Feb 04 '15 at 13:25
  • 1
    @Happy-go-Lucky: A bit of clarification on why/where this shape would be put to use would be more helpful. – Harry Feb 04 '15 at 13:25
  • Actually its only a dummy shape on webpage. –  Feb 04 '15 at 13:28
  • If its not dynamic. Just put a png Image :) Else need serious R&D. Working on the dynamic part – Abhilash Cherukat Feb 04 '15 at 13:28
  • @Happy-go-Lucky: Then what is preventing from using a background itself? Just don't put any content over it. – Harry Feb 04 '15 at 13:28
  • I actually want its colour to change on hover. only on sector. –  Feb 04 '15 at 13:31
  • @Happy-go-Lucky: Color change on hover can be done with backgrounds and gradients too :) – Harry Feb 04 '15 at 13:32
  • actually its not getting delimited, restricted. If hover is outside the boundary of shape, then also its shows that the hover is going on. –  Feb 04 '15 at 13:34
  • @Happy-go-Lucky all this information (shape boundaries, hover effect...) should be in the question itself, otherwise people will give answers then you will say "doesn't work because I also want this feature...". I see you are a biginner but it shouldn't prevent you from asking a [good question](http://stackoverflow.com/help/how-to-ask). – web-tiki Feb 04 '15 at 13:44

1 Answers1

3

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>
The Pragmatick
  • 5,379
  • 27
  • 44