-1

I need to develop the next style:enter image description here

The gradient around the image has diferents colors and can be uncompleted.

How can I do that and set the % of it?

For people that ask for code:

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #222;
}

.module-border-wrap {
  max-width: 250px;
  padding: 1rem;
  position: relative;
  background: linear-gradient(to right, red, purple);
  padding: 3px;
}

.module {
  background: #222;
  color: white;
  padding: 2rem;
}
Modus Tollens
  • 5,083
  • 3
  • 38
  • 46
Ignacio Castillejo Gomez
  • 87
  • 9
  • Pure code-writing requests are off-topic on Stack Overflow — we expect questions here to relate to *specific* programming problems — but we will happily help you write it yourself! Tell us [what you've tried](https://stackoverflow.com/help/how-to-ask), and where you are stuck. This will also help us answer your question better. – Libra Nov 18 '19 at 19:17
  • I have tried all. I try with pure CSS but the question is about programatic problem: how can I set the % of the circle like the image I have posted... – Ignacio Castillejo Gomez Nov 18 '19 at 19:22
  • 1
    Stack overflow questions contain a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example), examples of what you have tried, and most importantly, a _specific question_. You are asking how to do something with literally no code, this is off-topic and not what stackoverflow is for. I am not "hating." I am telling you why this post is off-topic and will eventually be removed. Try reading up on [how to ask a good question](https://stackoverflow.com/help/how-to-ask). – Libra Nov 18 '19 at 19:25
  • I post an image because is better than post a tons of lines of code isn't it? The question is so specific cause I need to set the % of the circle. That's the point. Can css do that? Can SVG do that? "A picture is worth a thousand words" – Ignacio Castillejo Gomez Nov 18 '19 at 19:38
  • 1
    You didn't even have code for the circle without percentage, you literally copied the below answer into your question. I think you misunderstand the issue: You are not asking for help debugging code, you are asking for someone to _tell you what to do_. This isn't generally allowed. – Libra Nov 18 '19 at 19:38
  • The SVG is posted from the answer below yes. And the CSS too? It seems like not... :/ Please if you don't want to help do not but don't say the question is not specific cause it is. – Ignacio Castillejo Gomez Nov 18 '19 at 19:40
  • It's also really bad to just copy the code from the answer into your question and make it look like it was part of it from the beginning. You are invalidating the answer by that: it now looks like the user below just repeated your code from the question. The question should be rolled back. Please read up on how to use Stack Overflow, it will make your experience a lot better! – Modus Tollens Nov 18 '19 at 19:45
  • I removed the answer's code from the question. The correct way now is to ask a follow-up question to get a solution for the missing percentage and reference this one. – Modus Tollens Nov 18 '19 at 19:48

1 Answers1

1

I believe you'll need to use SVGs. Here is a gradient you can apply to a path. You can use stroke-dasharray and stroke-offset to get the semi circle as well.

 <svg height="150" width="150">
  <defs>
    <radialGradient id="grad1" cx="80%" cy="20%" r="100%" fx="100%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,200,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="100" rx="30" ry="30" stroke="url(#grad1)" stroke-width="10" fill="none" stroke-linecap="round" stroke-dasharray="1000" stroke-dashoffset="840"/>
</svg

The stroke-dashoffset="" is the number you can adjust to increase or decrease the size of the circle. This works because you are creating a dashed line, that has very far apart dashes, so it is only showing part of one dash. If you offset that dash you can move it along the path.

Jim T Westerkamp
  • 72
  • 3
  • I've edited my answer to include properties to create a semi circle with rounded edge. – Jim T Westerkamp Nov 18 '19 at 21:39
  • Thanks so much! That's exactly what I'm looking for. I'm making test with stroke-dasharray and stroke-offset but I cannot understand the functionality of it. If I want to set the cicle to 50% how can I do that? Can you show me an example? Thanks so much!! – Ignacio Castillejo Gomez Nov 18 '19 at 23:59
  • I've made so many test setting both fields but I don't understand the behavior of those. For example if I set stroke-dashoffset to 500 the circle if full completed. If I set to 100 the full is also full completed. If I set to 999 the circle is transformed to a point and if I set to 1000 the circle is full empty. Another question maybe you can solve to me is that I wish to set the begin of the circle in the top of it. The example in the question is not like the result I want. Again, thank you so much for you answer cause this is my solution :D – Ignacio Castillejo Gomez Nov 19 '19 at 00:12
  • Is there any way to set the % instead of a number? – Ignacio Castillejo Gomez Nov 19 '19 at 00:18
  • transform-origin="100 100"" transform="rotate(90)" will help you with the starting point. You will need to play around with the numbers and add your own script to find percentages. https://codepen.io/digitladventures-jim/pen/VwwqJGx – Jim T Westerkamp Nov 19 '19 at 00:54