时间戳

首页 > 解决方案 > 在同一 div 中的多个三角形中完美居中文本（响应式）

html - 在同一 div 中的多个三角形中完美居中文本（响应式）

问题描述

我想先说明一下，我 100% 擅长使用纯 CSS 解决方案来创建三角形，并且只使用图像，因为我不知道用纯 CSS 来创建它们的好方法，它适用于所有设备。我添加了一个代码沙箱，但在这篇文章的底部是原始的 html/css。

这是我想要创建的图像（不要担心里面有名字的盒子）

在此处输入图像描述

我快到了，但是在调整大小时，我正在努力使文本完全居中于左下角和右下角三角形。这是一个代码沙箱链接：https ://codesandbox.io/s/ecstatic-beaver-1ex8s

调整浏览器大小时，您会看到文本偏离中心。

我正在 React 中构建一个应用程序，并将用它替换一个自定义图表以用于品牌推广。因此，它必须针对移动设备和各种设备进行缩减。这是我在应用程序中所处位置的屏幕截图，并且图表已被替换，因此您可以看到最终用途： 在此处输入图像描述

衷心感谢帮助！

样式.css

.container {
    position: relative;
    text-align: center;
    color: white;
}

.bottom-left {
    position: absolute;
    top: 75%;
    right: 66.6%;
}

.bottom-right {
    position: absolute;
    top: 75%;
    left: 66.6%;
    /* transform: translate(-100%, -100%); */
}

.middle {
    position: absolute;
    top: 66.6%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.centered {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

索引.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="container">
            <img src="images/triangle.png" alt="Snow" style="width: 100%" />
            <div class="bottom-left">Bottom Left</div>
            <div class="bottom-right">Bottom Right</div>
            <div class="middle">Middle</div>
            <div class="centered">Centered</div>
        </div>

        <script src="" async defer></script>
    </body>
</html>

标签： htmlcss

解决方案

您可以中继 vmin 单位来调整框的大小，并使用网格来绘制布局。

clip-path 可用于塑造三角形，最后弯曲和填充以垂直居中和偏移文本。

这是想法。

.container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  height: 80vmin;
  width: 98vmin;
  margin: auto;
}

.container>div {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 25%;
  font-size: 5vmin;
  color: white;
}

.container>.bottom-left {
  grid-row: 5 / span 4;
  grid-column: 1 / span 4;
  background: #fec00f;
}

.container>.bottom-right {
  grid-row: 5 / span 4;
  grid-column: 5 / span 4;
  background: #c02026;
}

.container>.middle {
  grid-row: 5 / span 4;
  grid-column: 3 / span 4;
  background: #3b3938;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  padding-top: 0;
  padding-bottom: 25%;
}

.container>.centered {
  grid-row: 1 / span 4;
  grid-column: 3 / span 4;
  background: #70ae47;
}

html {
  display: flex;
  min-height: 100%;
}

body {
  margin: auto;
}
<div class="container">
  <div class="bottom-left">Bottom Left</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="middle">Middle</div>
  <div class="centered">Centered</div>
</div>

clip-pathgrid-gap如果您愿意，还可以再次绘制边框（从容器背景）。

.container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  height: 80vmin;
  width: 98vmin;
  margin: auto;
  padding: 1vmin 1vmin 0.5vmin 1vmin;
  gap: 0.5vmin 1.5vmin;
  background: black;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.container>div {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 30%;
  font-size: 5vmin;
  color: white;
  text-shadow:0 0 1px #000
}

.container>.bottom-left {
  grid-row: 5 / span 4;
  grid-column: 1 / span 4;
  background: #fec00f;
}

.container>.bottom-right {
  grid-row: 5 / span 4;
  grid-column: 5 / span 4;
  background: #c02026;
}

.container>.middle {
  grid-row: 5 / span 4;
  grid-column: 3 / span 4;
  background: #3b3938;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  padding-top: 0;
  padding-bottom: 30%;
}

.container>.centered {
  grid-row: 1 / span 4;
  grid-column: 3 / span 4;
  background: #70ae47;
}

html {
  display: flex;
  min-height: 100%;
}

body {
  margin: auto;
}
<!-- you can include me inside another grid and decrease my vmin size to share it with other content -->
<div class="container">
  <div class="bottom-left">15%</div>
  <div class="bottom-right">10%</div>
  <div class="middle">15%</div>
  <div class="centered">60%</div>
</div>

推荐阅读