Question

我试图重新创造圣卢西亚的这面旗帜。虽然我无法弄清楚如何将三角形居中，但任何帮助都会受到赞赏！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

以徽标为中心的数学

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

以上属性提供给.out（徽标块）以及这些特定数字的原因。

宽度逻辑

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

高度逻辑

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

整体而言，您只是将徽标置于旗帜中间。

如果你知道旗帜的width和height。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

居中的三角形。使用三个三角形div完成：

＆＃13;

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

＆＃13;

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

＆＃13;

需要帮助在CSS中制作此标志

2 个答案: