CodingSparkles

How to Create the Venn Diagram in Pure CSS?

CSS

2 min read

October 30, 2021

How to Create the Venn Diagram in Pure CSS?

Photo by Mel Poole on Unsplash

In this article, I’m going to share the steps to create the Venn Diagram (CSS battle challenge) using pure CSS.

Step 1: Create the HTML elements

Create the required HTML elements as mentioned in the following code snippets.

HTML Element Structure

<div class="parent">
  <div class="child child-1"></div>
  <div class="child child-2"></div>
</div>

Step 2: Styles to Venn Diagram

Basic Style (To display elements in the center and apply background color)

body {
  background-color: #09042a;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 96vh;
}

To position and size the elements

.parent {
  display: flex;
}
/* Setting height and width for both elements to make it as circle  */
.child {
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

To overlap the left side circle with right side circle

.child-1 {
  background-color: #7b3f61;
  margin-right: -50px;
  position: relative;
  overflow: hidden;
}

To change the right side circle color

.child-2 {
  background-color: #e78481;
}

To create center space between two circles

.child-1::after {
  content: "";
  background-color: #09042a;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  left: 67%;
}