我正在尝试重新创建圣卢西亚的这面旗帜。虽然我不知道如何使三 Angular 形居中，但我们将不胜感激!
@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>最佳答案
Logo 居中背后的数学原理
left:calc(300px - 200px/2);
top:calc(150px - 200px/2);
上述属性被赋予 .out(标志 block )以及这些特定数字的原因。
宽度逻辑
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)
总的来说，您只是将 Logo 置于旗帜中间。
Provided you know the
widthandheightof 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>关于html - 需要帮助在 CSS 中制作这个标志，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49562747/