Need help making this flag in CSS

Question

I'm trying to recreate this exact flag of Saint Lucian. Although I can't figure out how to center the triangle, any help would be appreciated!

@charset "UTF-8";

.blue {
  width: 400px;
  height: 250px;
  background-color: #9EC4E0;
  position: absolute;
  z-index: -1;
}

.triangle-up {
 width: 0;
 height: 50px;
 border-left: 100px solid transparent;
 border-right: 100px solid transparent;
 border-bottom: 200px solid red;
}

<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Saint Lucia</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>

  <body>

    <div class="blue">
    <div class="triangle-up"></div>

    </div>


  </body>

</html>

I am afraid your post will be soon downvoted and deleted , you need to try something , show some effort and then you can ask your question and show what have you tried , because asking a question like this sound like your asking some one to do your home work — Abslen Char, Mar 29 '18 at 18:24
This is one should be easier, just different triangles layered on top of each other. You can use position: absolute; and z-index for layers — StefanBob, Mar 29 '18 at 18:27
Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — levininja, Mar 29 '18 at 20:05

Dhaval Jardosh · Accepted Answer · 2018-03-29T19:21:11.603

Math behind centering the logo

left:calc(300px - 200px/2);
top:calc(150px - 200px/2);

The above properties are given to .out(logo block) and the reason for those particular numbers.

Width logic

left:calc("move logo to half of flag width" - "width of triangle" / 2)

Height Logic

top:calc("move logo to half of flag height" - "height of triangle" / 2)

In whole, you just centered the logo in the middle of the flag.

Provided you know the width and height of the flag.

.arrow-up {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 200px solid white;
}

.arrow-up1 {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 190px solid black;
  left: 10px;
  top: 10px;
}

.arrow-up2 {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid #f7d117;
  top: 100px;
}

.out {
  left: calc(300px - 200px/2);
  top: calc(150px - 200px/2);
  position: relative;
}

.flag {
  position: relative;
  background: #adcfe6;
  height: 300px;
  width: 600px;
}

<div class="flag">
  <div class="out">
    <div class="arrow-up"></div>
    <div class="arrow-up1"></div>
    <div class="arrow-up2"></div>
  </div>
</div>

Chase DeAnda · Answer 2 · 2018-03-29T19:20:26.640

Centered triangles. Accomplished using three triangle divs:

@charset "UTF-8";
.blue {
  width: 400px;
  height: 250px;
  background-color: #9EC4E0;
  position: relative;
  z-index: -1;
  overflow: hidden;
}

.triangle-up {
  left: 50%;
  margin-left: -100px;
  position: absolute;
  width: 0;
  height: 50px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 200px solid white;
}

.triangle-up2 {
  left: 50%;
  margin-left: -100px;
  position: absolute;
  content: '';
  width: 0;
  height: 70px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 200px solid black;
}

.triangle-up3 {
  left: 50%;
  margin-left: -100px;
  position: absolute;
  content: '';
  width: 0;
  height: 150px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 105px solid gold;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Saint Lucia</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="blue">
    <div class="triangle-up"></div>
    <div class="triangle-up2"></div>
    <div class="triangle-up3"></div>
  </div>


</body>

</html>

@Lynn if this answer meets your needs, please mark it as the correct answer. — Chase DeAnda, Mar 29 '18 at 18:38

Need help making this flag in CSS

2 Answers2