Trying to get the svg's on top of the circle

HTML-CSS
#1

Is this code not set up correctly to do what I am trying to do?

How would I be able to move the svg’s closer together?

Code: https://jsfiddle.net/3t0dkwsq/3/

body {
  margin: 0;
  background: beige;
}

.grid {
  width: 150px;
  height: 150px;
  margin: 5%;
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: black;
  transform: rotate(45deg);
}

.circle {
  width: 150px;
  height: 150px;
  background: red;
  border-radius: 50%;
}

.item {
  transform: rotate(315deg);
  margin: auto;
}

<div class="grid circle"  >

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
    
  <svg class="item" width="20px" viewBox="0 0 36 36">
    <path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
    <path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
    <path fill="#4289C1" d="M26 12h10L18 33z" />
    <path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
    <path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>

</div>
#2

Hi!
just adding a padding to the element with the class of .circle or grid should do the trick


.grid {
  padding: 1.5rem;
}

you can play around with different values and let me know if you want an explanation about why this works.

Hope this helped! :slightly_smiling_face:

1 Like
#3

I got it.

Code: https://jsfiddle.net/f5rkyunz/3/

#4

Thank you for that, I have a follow up question.

How would I add a background image to it without the image appearing sideways?

But I want the background image to appear normal, and not rotated.

code: https://jsfiddle.net/myk8f4as/1/


.circle {
    width: 150px;
    height: 150px;
    background: red;
    border-radius: 50%;
    padding: 20px;
    box-sizing: border-box;
    background-image: url("https://via.placeholder.com/150");
    background-repeat: no-repeat;
    background-size: cover;
}

#5

The main point of this post is that if you add an element inside of your container that has a position of absolute, you can change it’s rotation independently of the container. If you want to implement it yourself then stop reading else read on and ill tell you how to do it step by step.

There are a few things you need to make it work.

the first is to add the img that you want to insert as a child to the container.

NOTE: for images you may have to also add a display of block and width of 100% to the image or you can also play around with the settings.

After which you can set its position property to absolute. and set its parents position to relative which will get it out of normal from and wont interact with the other things.
then to setits dimensions to the full dimensions of the container and to set the border radius use the following code.

looking at the code will be easier.

<div class="back">
</div>
<!-- add this inside the element with the class of circle -->


.back{
  border-radius: 50%; 
  position: absolute;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  background-color: green;
  transform: rotate(-45deg);
}

and add this to your circle

.circle {
  position:relative;
  background: transparent;.
#6

I got it!!!

code: https://jsfiddle.net/npe528xu/

#7

congratulations on completing it! :wink:

#8

How would I go about removing Transform from the code altogether?

#9

I answered it on the other post!

1 Like
#10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.