How i can give a indigo color only to a div instead of whole body with help of css?-CodePudding

I want to get like this kind of result which is shown in the picture

I have written some code but I did not get the exact result which I want, my target is to give an indigo color to a div and leave white the rest of the whole body.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
 <!-- Bootstrap and fontawesome -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body >
<style>
   .arc {
       
       position: absolute;
       width: 3.5em;
       height: 2em;
       border-radius: 70%;    /* make it circular */
       
       border-bottom:5px solid brown;  /* the arc effect */
       z-index: -1;
   }
   
   .wrapper > .arc {
       display: block;
   }
   body{background-color:indigo !important}
</style>
<div class="wrapper container" >
    <div class="arc"></div>
    <div class="exp"><span style="color:white !important">Example</span></div>
</div>

        
</body>
</html>

CodePudding user response：

My proposition is simple, new additional container "logo" with appropriate height, width and background color, flexbox on class container selector, a little white space in the right places. I hope You will be content.

.arc {
  margin-top: 0.75rem;
  position: absolute;
  width: 4.4em;
  height: 2em;
  border-radius: 70%;
  /* make it circular */
  border-bottom: 5px solid brown;
  /* the arc effect */
}

.wrapper {
  height: 90%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  margin: 1rem;
  background-color: indigo;
  width: 90px;
  height: 45px;
}

.exp {
  font-size: 1.2rem;
}

<html>

<head>
  <title>Page Title</title>
  <!-- Bootstrap and fontawesome -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

  <div class="logo">
    <div class="wrapper container">
      <div class="arc"></div>
      <div class="exp"><span style="color:white !important">Example</span></div>
    </div>
  </div>

</body>

</html>

CodePudding user response：

<style>
    .wrapper{
        background-color:#4B0082;
    }
</style>

This will help you in restricting indigo color to your badge.