Question

我在CSS3中设计徽标。

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

这是我的CSS代码。

＆＃13;

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

＆＃13;

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

＆＃13;

此处.logo div大小 200px X 200px 。当我将其更改为 300px X 300px 时，内部div会混乱，如下面的代码段所示。

＆＃13;

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

＆＃13;

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

＆＃13;

如何根据父母的身高和宽度调整自适应徽标？

Answer 1

我稍微调整了你的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;
}

首先，我同意这里的其他海报，图像听起来更像是在这种情况下应该使用的。然而，这并没有真正回答这个问题;它只是方便的建议。

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

Answer 2

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

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

实现您想要做的事情的一个完美方法是去寻找SVG徽标。

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

This tutorial可以帮助您入门。

div内部div的相对位置

3 个答案: