Clever Geek Handbook

Creating dashed line objects with CSS after design

I'm trying to code more of my projects with HTML5 and CSS3, but I was curious to see what they do for their objects. I would like to know how I can duplicate this image with all the CSS, preferably within the same class, if it can be done. What's the best way to do this?

enter image description here

+3


source to share


2 answers


This will be the css to get this effect:



div{
  width: 200px;
  height: 200px; 
  border: 2px dashed black;
  margin: 100px;
  border-radius: 50%;
  }
  div:after{
  content: ' ';
  display: block;
  margin: -10px;
    width: 215px;  height: 215px; 
  border: 2px dashed black;
  transform:rotate(16deg);
  border-radius: 50%;

  }
+4


source


You must use an image for this. Either gif, png, or svg.

While it is technically possible with css using border: dashed and high border radius, I would not recommend it as different browsers have applied dashed borders differently. There is no w3 standard as to how browser renderers should render this. You also need two divs and rotate one of them.



In particular, Firefox and the Android browser will completely fail to show this correctly. For example, when using a corner radius, Firefox will show a solid line (not broken) at the rounded corners.

I recently created a visual css builder that would show this pretty quickly here - try playing with different settings in different browsers.

+2


source






More articles:


All Articles