CODEWITHSUNDEEP
htmlcss
user9187119
user9187119

Reputation:

Css circle with border that is hollow inside?

Is there any way to make a circle hollow inside, so that there is only border visible and present?

This way I have only the visual effect. But there is some object under the invisible part of circle that has a onClick() method and the circle is hiding this method, so how to get rid off the filling of circle? Or maybe this is some bad approach and I should do this differently?

My current css looks like this:

.inner-circle{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  background-color: rgba(0, 0, 0, 0);
}
<span class="inner-circle"></span>

Upvotes: 7

Views: 20659

Answers (5)

Jarvis
Jarvis

Reputation: 415

For your task is better to use canvas

Here is an example. You could adopt it to your task.

Also you could put in your code 2 different circles with borders.

var ctx;
var canvas = document.getElementById("canvas");
var leftValue = 250;
var topValue = 150;	

drawWheel1();

function drawWheel1() {
    if(canvas.getContext) {
    	var outsideRadius = 120;
    	var insideRadius = 80;
        var arc = Math.PI * 2;
	 
        //Initialization
    	ctx = canvas.getContext("2d");
    	ctx.lineWidth = 5;
      
        //Draw the outer arc
      	ctx.beginPath();
    	ctx.strokeStyle = "black";
      	ctx.fillStyle = "#029990";
      	ctx.arc(leftValue, topValue, outsideRadius, 0, arc, false);     
        ctx.stroke();
      	ctx.fill();
        ctx.closePath();
      
        //Draw the inner arc
        ctx.beginPath();
    	ctx.strokeStyle = 'white';
        ctx.fillStyle = 'white';
        ctx.arc(leftValue, topValue, insideRadius, arc, 0, true);
        ctx.stroke();
      	ctx.fill();
        ctx.closePath();
    }
}
<canvas id="canvas" width="500" height="580"></canvas>

Upvotes: -1

Winter
Winter

Reputation: 2517

I think what you are after has nothing to do with the css or visual issues. The problem you are facing is that there is an element on top of another element, and the element at the bottom does not get "clicked" because of the element on top - or something to that effect. Am I right?

I think this might illustrate what is happening: 

const outer = document.getElementById('Outer');
const inner = document.getElementById('Inner');

outer.addEventListener("click", function(event) {
  alert('Clicked outer');
}, false);

inner.addEventListener("click", function(event) {
  alert('Clicked inner');
}, false);
#Outer {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: pink;
  padding: 10px;
}

#Ontop {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  background-color: rgba(0, 0, 0, 0);
  padding: 10px;
}
<div id="Outer">
  <div id="Inner">
    click me!
  </div>
</div>

<div id="Ontop">
  &nbsp;
</div>

I don't know if your problem can be solved with css or if you have to put a new click event on the top element that calls the event on the element underneath:

const ontop = document.getElementById('Ontop');

ontop.addEventListener("click", function(event) {
  inner.click();
}, false);

Upvotes: 0

xong
xong

Reputation: 350

You can use poiner-events: none to delegate clicks and hovers to covered elements. This works for all major browsers and for IE since version 11.

.inner-circle{
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top:0;
  left:0;
  pointer-events:none;
}
<input type="checkbox" />
<span class="inner-circle"></span>

Upvotes: 10

Pete
Pete

Reputation: 58432

Your problem is that you cannot give a width and height to inline elements (which a span is by default), you need to make the span inline-block or block:

.inner-circle{
  display:inline-block;   /* add this */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  background-color: rgba(0, 0, 0, 0);
}
<span class="inner-circle"></span>

More information about display

Upvotes: 3

Saravana
Saravana

Reputation: 3496

Try below this.

this link also helpful. 

.inner-circle{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  line-height: 50px;
  border-color: blue;
  padding: 10px 18px;
  background-color: rgba(0, 0, 0, 0);
}
<span class="inner-circle"></span>

Upvotes: 2

Related Questions