Html Question posted in
Some basic documentation can be found here.

Html – Is there a possibility to create a WhatsApp-status-like border with CSS?

I am working on a social media project at the moment, where I want to implement "stories".

I want there to be an easy way to see how many stories you’ve already seen and how many there are.

Then, seeing the WhatsApp status (WhatsApp status), I thought that this could be a good way.

I was looking forward to implementing this in CSS, but looking it up, there were only very few results that didn’t provide me with the information I would need.

I stumbled across the "conic-gradient" CSS property, however, I can only make one whole border, not many small ones that I could round.

Are there any ideas or information (e.g. MDN docs, own code) you have for me? Thanks.

Tags:

2

Answers


  1. 0

    You can use the following CSS:-

    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23EC3463' stroke-width='10' stroke-dasharray='20' stroke-dashoffset='11' stroke-linecap='square'/%3e%3c/svg%3e");
border-radius: 100px;

    Check svg properties to adjust the width and the styles that you want, play with it as much as you can to have a deep understanding.

    Login or Signup to reply.
  2. 0

    You could use an SVG with a stroke-dasharray.

    :root {
  --value: 100;
  --time: 3s;
}

svg {
  height: 90vh;
  ]
}

path {
  fill: transparent;
  stroke-width: 20;
  stroke-linecap: butt;
}

.circle {
  stroke: lightblue;
  stroke-dasharray: 15 5;
}
    <svg viewbox="0 0 320 320">


  <path class="circle" d="M160,10
                         A150,150 0 0 1 160,310
                         A150,150 0 0 1 160,10
                         " pathLength="120"/> 
  

</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search