Question

虽然我遇到了很多问题，但我正在重新制作吉布提的旗帜。首先，我尝试调整星星的大小，这一切都让人感到困惑。我需要明星非常小，同时仍保持其形状。但是我放弃了，所以我的结果是让国旗变得更大，但是白色的三角形紧贴着旗帜的顶部蓝色部分，所以它看起来有点奇怪。此外，明星正在坚持白色三角形。

总而言之，这非常令人困惑，我真的很感激一些帮助！

here's a picture of the flag

@charset "UTF-8";

.white {
  width: 200px;
  height: 100px;
  left: px;
  position: absolute;
  z-index: -1;
}

.blue {
  width: 300px;
  height: 90px;
  background-color: #27B6D6;
  position: absolute;
  z-index: -1;
}

.green {
  width: 300px;
  height: 180px;
  background-color: #AEE749;
  position: absolute;
  z-index: -1;
}


.triangle-right {
	border-top: 90px solid transparent;
	border-left: 140px solid #fff;
	border-bottom: 90px solid transparent;
    border-left-width: 160px
}

.star-5-points {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 0;
  height: 0;
  margin: -120px 0;
  border: 100px solid rgba(0,0,0,0);
  border-top: 0 solid;
  border-bottom: 70px solid red;    
  color: red;
  transform: rotateZ(35deg)   ;
}

.star-5-points::before {
  width: 0;
  height: 0;
  position: absolute;
  content: "";
  top: -45px;
  left: -65px;
  border: 30px solid rgba(0,0,0,0);
  border-top: 0 solid;
  border-bottom: 80px solid red;
  transform: rotateZ(-35deg)   ;
}

.star-5-points::after {
  width: 0;
  height: 0;
  position: absolute;
  content: "";
  top: 3px;
  left: -105px;
  border: 100px solid rgba(0,0,0,0);
  border-top: 0 solid;
  border-bottom: 70px solid red;
  color: red;
  transform: rotateZ(-70deg)   ;
}

<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>DjiBouti</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>

  <body>

      <div class="green"></div>
      <div class="blue">
        <div class="triangle-right"></div>
        <div class="star-5-points"></div>
      <div class="white"></div>

    </div>


  </body>

</html>

Answer 1

哇那个明星非常挑剔。这就是我想出的：

@charset "UTF-8";

.white {
  width: 200px;
  height: 100px;
  left: px;
  position: absolute;
  z-index: -1;
}

.blue {
  width: 300px;
  height: 90px;
  background-color: #27B6D6;
  position: absolute;
  z-index: -1;
}

.green {
  width: 300px;
  height: 180px;
  background-color: #AEE749;
  position: absolute;
  z-index: -1;
}


.triangle-right {
	border-top: 90px solid transparent;
	border-left: 140px solid #fff;
	border-bottom: 90px solid transparent;
    border-left-width: 160px
}

.star-5-points {
box-sizing: content-box;
    width: 0;
    height: 0;
    margin: -96px 0;
    border: 33px solid rgba(0,0,0,0);
    border-top: 0 solid;
    border-bottom: 19px solid red;
    color: blue;
    transform: rotateZ(32deg);
}

.star-5-points::before {
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    top: -13px;
    left: -26px;
    border: 13px solid rgba(0,0,0,0);
    border-top: 0 solid;
    border-bottom: 22px solid red;
    transform: rotateZ(-35deg);
}

.star-5-points::after {
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    top: 1px;
    left: -36px;
    border: 29px solid rgba(0,0,0,0);
    border-top: 0 solid;
    border-bottom: 22px solid red;
    color: red;
    transform: rotateZ(-70deg);
}

<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>DjiBouti</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>

  <body>

      <div class="green"></div>
      <div class="blue">
        <div class="triangle-right"></div>
        <div class="star-5-points"></div>
      <div class="white"></div>

    </div>


  </body>

</html>

需要帮助 - CSS

1 个答案: