div内部div的相对位置

Question

我正在用 CSS3 设计一个徽标。

我创建了一个具有特定高度和宽度的类.logo。 div 内的其余 .logo 类将调整其相对于父级 div 的位置。

这是我的 CSS 代码。

.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>

这里.logo div 大小为200px X 200px。当我将其更改为 300px X 300px 时，内部 div 就像下面的 sn-p 一样混乱。

.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>

我怎样才能有一个响应式徽标，它会根据父级的高度和宽度进行调整？

Answer 1

将尺寸设置为百分比应该可以调整大小。但尖箭头提示不会，因为它们不能设置为百分比。下面的代码使徽标调整大小，但您会看到箭头在某些时候被切断。希望这能让你朝着正确的方向前进

.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

我稍微调整了你的 CSS：

.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;
}

首先，我同意这里的其他发帖人的观点，即图像听起来更像是在这种情况下应该使用的图像。但是，这并不能真正回答问题；这只是方便的建议。

通过您尝试的那种定位，您可以尝试让您的元素在容器内使用一个共同的“原点”。换句话说，总是尝试从相同的边缘对齐它们。在顶部、右侧、左侧和底部之前，您有一点混合。我让相互尊重的元素使用相同的边缘来计算距离。我还添加了几个 CSS calc 函数，例如 height: calc(65% - 25px);，因为您主要将百分比元素与几个基于静态像素的测量值混合在一起。

Answer 3

实现您想要做的事情的完美方法是使用 SVG 徽标。

SVG 可以在不中断的情况下调整大小，并且是 quite powerful。

This tutorial 可以帮助您入门。