Html - How do i hide a partcular part of the border,

VishalC
July 28, 2023
124 views
3 votes
3 Answers

So, i am making a solar system, and i am stuck at saturn. I am trying to make a ring of the saturn but i am facing an issue. So everything is done but i need to hide the border which must come at the back of the planet and also it should not be visible. So i need to hide only a paritcular part of the border.
You see the blue border, i need only enough border so that it is not visible and it must look like a saturn ring. This is just a test it is not a real project.!!

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.big {
  width:  170px;
  height: 170px;
  background-color: teal;
  border-radius: 50%;
  position: relative;
  left: 129px;

}

.saturn-ring {
  width:  90px;
  height: 90px;
  border-top: 2px solid red;
  border-left: 2px solid red;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
  transform: skew(295deg, 309deg);
  border-radius: 50%;
}

<div class="big"> </div>
<div class="saturn-ring"> </div>

"I NEED THIS TO BE A SATURN RING AND I TRYING TO MAKE SATURN, SO HOW DO I DO IT???"

I tried to hide the right and bottom border but it is not helping, it hides the whole border and it leaves an uneven space which does not look like saturn:::::

Tags: css html

Answers

I solved it by separating the red and blue rings and using z-index.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .big{
            width:  170px;
            height: 170px;
            background-color: teal;
            border-radius: 50%;
            position: relative;
            left: 50px;
            z-index: 1;

        }
        .saturn-ring-blue{
        position: absolute;
        width:  90px;
        height: 90px;
        border-top: none;
        border-left: none;
        border-right: 2px solid blue;
        border-bottom: 2px solid blue;
        transform: skew(295deg, 309deg);
        border-radius: 50%;
        left: 50%;
        }
        .saturn-ring-red{
        position:absolute;
        width:  90px;
        height: 90px;
        border-top: 2px solid red;
        border-left: 2px solid red;
        border-right: none;
        border-bottom: none;
        transform: skew(295deg, 309deg);
        border-radius: 50%;
        z-index: 999;
        left: 50%;

        }
    </style>
</head>
<body>
    <div class="big">  </div>
        <div class="saturn-ring-blue">
        </div>
        <div class="saturn-ring-red">
        </div>

</body>
> </html>

Here is one solution.

Create two divs, one for red and one for blue. Then position them using z-index and position relative.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.saturn{
  position:relative;
}

.big {
  width:  170px;
  height: 170px;
  background-color: teal;
  border-radius: 50%;
  position: relative;
  left: 129px;

}

.saturn-ring-red{
  width:  90px;
  height: 90px;
  border-top: 2px solid red;
  border-left: 2px solid red;
  transform: skew(295deg, 309deg);
  border-radius: 50%;
  position:relative;
  top:52px;
}

.saturn-ring-blue{
  width:  90px;
  height: 90px;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
  transform: skew(295deg, 309deg);
  border-radius: 50%;
  position:relative;
  z-index:-1;
  top:-40px;
}

<div class="big"> </div>
<div class="saturn">
<div class="saturn-ring-red"></div>
<div class="saturn-ring-blue"></div>
</div>

try this html and css:

<div class="saturn">
  <div class="big"> </div>
</div>

css:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.big {
  width:  170px;
  height: 170px;
  background-color: teal;
  border-radius: 50%;
  position: relative;
}

.saturn{
  position:relative;
}

.saturn::before,.saturn::after {
  content:"";
  display:block;
  position:absolute;
  width:  90px;
  height: 90px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(295deg, 309deg);
  border-radius: 50%;
}

.saturn::before {
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
}

.saturn::after {
  border-top: 2px solid red;
  border-left: 2px solid red;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How do i hide a partcular part of the border,

Answers