How to outline only visible part of an element?

user_12286887 0
Viewed 112

I'm trying to improve my css skills, and wanted to draw like a moon and outline it. I mad this by using 2 circles and the second one has the same color as the background so it look like a moon. However now i want to outline/ give it a border but i don't know how to do this, because the other parts are overlapped with the secon circle.

body{
  position: relative;
  background-color: white;
  padding-left: 40%;
}

#div1{
  position: absolute;
  height: 400px;
  width: 400px;
  border-radius: 100%;
  background-image: linear-gradient(45deg, #050182, #51bfdb);
  border: 3px solid black;
}

#div2{
  position: absolute;
  height: 350px;
  width: 350px;
  background-color: white;
  border-radius: 50%;
  margin-left: 110px;
  margin-top: 25px;
  z-index: 2;
}
<div class="container">
  <div id="div1"></div>
  <div id="div2"></div>
</div>

css html
4 Answers

I would simplify your code using mask then I will rely on drop-shadow filter for the outline

#div1{
  filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000);
}
#div1:before {
 content:"";
 display:block;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-image: linear-gradient(45deg, #050182, #51bfdb);
  -webkit-mask: radial-gradient(circle 100px at 80% 50%,#0000 98%,#000);
}
<div id="div1"></div>

user_86203330

You can add border left property to div2 for desired result.

body{
  position: relative;
  background-color: white;
  padding-left: 40%;
}

#div1{
  position: absolute;
  height: 400px;
  width: 400px;
  border-radius: 100%;
  background-image: linear-gradient(45deg, #050182, #51bfdb);
  border: 3px solid black;
}

#div2{
  position: absolute;
  height: 350px;
  width: 350px;
  background-color: white;
  border-radius: 50%;
  margin-left: 110px;
  margin-top: 25px;
  z-index: 2;
  border-left: 3px solid black;
}
<div class="container">
  <div id="div1"></div>
  <div id="div2"></div>
</div>

user_121237120

Like Justinas already commented, you're kind of trying to do SVG's job in CSS here, which is pretty clunky and inefficient.

If you know a little HTML and CSS, which it seems you do, then SVG will feel like just more of the same.

SVG will just look like a couple new HTML elements to you, and you just sprinkle it right into your HTML; It also just uses the same CSS stylesheet that as your HTML already uses.

To illustrate, run this snippet here; just a couple lines of CSS and some SVG, i'm sure you can tell what 90% of it means instantly.

body            { background-color: #FFF; }
svg             { background-color: #CCC; }
.gradient_start { stop-color:rgb(255, 255, 0); stop-opacity: 1; }
.gradient_end   { stop-color:rgb(255,   0, 0); stop-opacity: 1; }
text            { font-family: "Verdana";      font-size: 32pt; }
<html>
  <body>
  
    <svg width="400" height="200">
      <defs>
        <linearGradient id="mygradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%"    class="gradient_start" />
          <stop offset="100%"  class="gradient_end" />
        </linearGradient>
      </defs>

      <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#mygradient)" />

      <text x="150" y="86" fill="#ffffff">
        Turtles !
      </text>
    </svg>
    
  </body>
</html>

In SVG you have access to a lot more drawing elements, such as the <ellipse> used in this example.

user_138306770

Look at the result, using the border-left property.

body{
  position: relative;
  background-color: white;
  padding-left: 40%;
}

#div1{
  position: absolute;
  height: 400px;
  width: 400px;
  border-radius: 100%;
  background-image: linear-gradient(45deg, #050182, #51bfdb);
  border: 3px solid black;
}

#div2{
  position: absolute;
  height: 350px;
  width: 350px;
  background-color: white;
  border-radius: 50%;
  margin-left: 110px;
  margin-top: 25px;
  z-index: 2;
  border-left: 2px solid black;
}
<div class="container">
  <div id="div1"></div>
  <div id="div2"></div>
</div>

user_173500190
Related