relative position of div inside div

Question

I'm designing a logo in CSS3.

I have made a class .logo with particular height and width. Rest of the div inside .logo class will resize its position relative to parent div.

This is my CSS code.

.logo {
    width: 200px;
    height: 200px;
    position: fixed;
}
.logo .vertical-left {
    width: 25px;
    height: 60%;
    position: absolute;
    bottom: 0;
    background-color: #09aaba;
}
.logo .vertical-right {
    width: 25px;
    height: 65%;
    background-color: #09aaba;
    margin-left: 60%;
    top: 0;
    position: absolute;
}
.logo .vertical-right2 {
    width: 25px;
    height: 60%;
    background-color: #ba1dd4;
    margin-left: 60%;
    top: 0;
    position: absolute;
}
.logo .horizontal-top {
    width: 100%;
    height: 25px;
    background-color: #09aaba;
    position: absolute;
    top: 30%;
    border-radius: 10px 0;
}
.logo .horizontal-top2 {
    width: 60%;
    height: 25px;
    background-color: #ba1dd4;
    position: absolute;
    top: 30%;
    right: 0;
}
.logo .horizontal-bottom {
    width: 72.5%;
    height: 25px;
    background-color: #09aaba;
    position: absolute;
    top: 65%;
    border-radius: 10px 0;
}

/* triangle */
.logo .arrow-left {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  position: absolute;
  top: 30%;
  left: 35%;
  border-right:10px solid #ba1dd4;
}
.logo .arrow-down {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 13px solid transparent;
  position: absolute;
  top: 60%;
  right: 27%;
  border-top: 10px solid #ba1dd4;
}

    <div class="logo">
        <div class="vertical-left"></div>
        <div class="vertical-right"></div>
        <div class="vertical-right2"></div>
        <div class="horizontal-top"></div>
        <div class="horizontal-top2"></div>
        <div class="horizontal-bottom"></div>
        <div class="arrow-left"></div>
        <div class="arrow-down"></div>
    </div>

Here .logo div size is 200px X 200px. When I change it to 300px X 300px the inside div are messed up as in following snippet.

.logo {
  width: 300px;
  height: 300px;
  position: fixed;
}

.logo .vertical-left {
  width: 25px;
  height: 60%;
  position: absolute;
  bottom: 0;
  background-color: #09aaba;
}

.logo .vertical-right {
  width: 25px;
  height: 65%;
  background-color: #09aaba;
  margin-left: 60%;
  top: 0;
  position: absolute;
}

.logo .vertical-right2 {
  width: 25px;
  height: 60%;
  background-color: #ba1dd4;
  margin-left: 60%;
  top: 0;
  position: absolute;
}

.logo .horizontal-top {
  width: 100%;
  height: 25px;
  background-color: #09aaba;
  position: absolute;
  top: 30%;
  border-radius: 10px 0;
}

.logo .horizontal-top2 {
  width: 60%;
  height: 25px;
  background-color: #ba1dd4;
  position: absolute;
  top: 30%;
  right: 0;
}

.logo .horizontal-bottom {
  width: 72.5%;
  height: 25px;
  background-color: #09aaba;
  position: absolute;
  top: 65%;
  border-radius: 10px 0;
}


/* triangle */

.logo .arrow-left {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  position: absolute;
  top: 30%;
  left: 35%;
  border-right: 10px solid #ba1dd4;
}

.logo .arrow-down {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 13px solid transparent;
  position: absolute;
  top: 60%;
  right: 27%;
  border-top: 10px solid #ba1dd4;
}

<div class="logo">
  <div class="vertical-left"></div>
  <div class="vertical-right"></div>
  <div class="vertical-right2"></div>
  <div class="horizontal-top"></div>
  <div class="horizontal-top2"></div>
  <div class="horizontal-bottom"></div>
  <div class="arrow-left"></div>
  <div class="arrow-down"></div>
</div>

How can I have a responsive logo which will adjust according to parent height and width?

Answer 1

Setting the dimensions to percentages should make it resize. But the pointed arrow tips won't because they can't be set to percentage. The code below makes the logo resize but you will see that the arrow head cuts off at some point. Hope this puts you in the right direction

.logo {
    width: 300px;
    height: 300px;
    position: fixed;
}
.logo:nth-child(2) {
    width: 100px;
    height: 100px;
    position: absolute;
    right: 0;
}
.logo .vertical-left {
    width: 12.5%;
    height: 60%;
    position: absolute;
    bottom: 0;
    background-color: #09aaba;
}
.logo .vertical-right {
    width: 12.5%;
    height: 65%;
    background-color: #09aaba;
    margin-left: 60%;
    top: 0;
    position: absolute;
}
.logo .vertical-right2 {
    width: 12.5%;
    height: 60%;
    background-color: #ba1dd4;
    margin-left: 60%;
    top: 0;
    position: absolute;
    display: flex;
    justify-content: center ;
    align-items: flex-end;
}
.logo .horizontal-top {
    width: 100%;
    height: 12.5%;
    background-color: #09aaba;
    position: absolute;
    top: 30%;
    border-radius: 10px 0;
}
.logo .horizontal-top2 {
    width: 60%;
    height: 12.5%;
    background-color: #ba1dd4;
    position: absolute;
    top: 30%;
    right: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.logo .horizontal-bottom {
    width: 72.5%;
    height: 12.5%;
    background-color: #09aaba;
    position: absolute;
    top: 65%;
    border-radius: 10px 0;
}

/* triangle */
.logo .arrow-left {

}
.logo .arrow-down {
  
}
.vertical-right2:after {
    content: '';
    width: 100%;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 13px solid transparent;
    position: relative;
    bottom: -10px;
    border-top: 10px solid #ba1dd4;
    z-index: 100;
}
.horizontal-top2:before {
    content: '';
    width: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    position: relative;
    border-right: 10px solid #ba1dd4;
    left: -10px;
    flex-grow: 1;
     z-index: 100;
  }

<div class="logo">
        <div class="vertical-left"></div>
        <div class="vertical-right"></div>
        <div class="vertical-right2"></div>
        <div class="horizontal-top"></div>
        <div class="horizontal-top2"></div>
        <div class="horizontal-bottom"></div>
        <div class="arrow-left"></div>
        <div class="arrow-down"></div>
    </div>
<div class="logo">
        <div class="vertical-left"></div>
        <div class="vertical-right"></div>
        <div class="vertical-right2"></div>
        <div class="horizontal-top"></div>
        <div class="horizontal-top2"></div>
        <div class="horizontal-bottom"></div>
        <div class="arrow-left"></div>
        <div class="arrow-down"></div>
    </div>

Answer 2

I've tweaked your CSS a bit:

.logo .vertical-right {
    width: 25px;
    height: calc(65% - 25px);
    background-color: #09aaba;
    margin-left: 60%;
    bottom: calc(27% + 25px);
    position: absolute;
}
.logo .vertical-right2 {
    width: 25px;
    height: 60%;
    background-color: #ba1dd4;
    margin-left: 60%;
    bottom: 40%;
    position: absolute;
}
.logo .horizontal-top {
    width: 100%;
    height: 25px;
    background-color: #09aaba;
    position: absolute;
    bottom: 60%;
    border-radius: 10px 0;
}
.logo .horizontal-top2 {
    width: 60%;
    height: 25px;
    background-color: #ba1dd4;
    position: absolute;
    bottom: 60%;
    right: 0;
}
.logo .horizontal-bottom {
    width: calc(60% + 25px);
    height: 25px;
    background-color: #09aaba;
    position: absolute;
    bottom: 27%;
    border-radius: 10px 0;
}

/* triangle */
.logo .arrow-left {
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    position: absolute;
    bottom: 60%;
    right: 60%;
    border-right: 10px solid #ba1dd4;
}
.logo .arrow-down {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 13px solid transparent;
    position: absolute;
    top: 60%;
    margin-left: 60%;
    border-top: 10px solid #ba1dd4;
}

First off I agree with other posters here that an image sounds more like what should be getting used in this case. However that doesn't really answer the question; it's just handy advice.

With the sort of positioning you're attempting try to make your elements use a common "point of origin" within your container. In other words always try to align them from the same edges. You had a bit of a mixture before of top, right, left, and bottom. I've made elements that respect each other use the same edge for calculating distance. I've also added a couple of CSS calc functions like this one height: calc(65% - 25px);, since you're mixing mostly percentage elements with a couple of static pixel based measurements.

Answer 3

A perfect way to achieve what you want to do is to go for a SVG logo.

SVGs can be resized without breaking, and are quite powerful.

This tutorial could help you get started.