Question

我需要在多边形背景中放入文本。 1）当我用剪切路径创建多边形时，形状是响应式的，但是剪切掉了文本内容的溢出。 https://jsfiddle.net/hedgehogsweater/Ldyh2kqx/8/ 2）用多边形点创建文本时，https://jsfiddle.net/hedgehogsweater/c69hayf7/在将文本居中到多边形中时遇到了麻烦。我现在尝试使用align-items: center; justify-content: center;和vertical-align: center和top: 30%来获得小提琴的页边距，但我希望div的文本中心本身具有调整大小的功能。

我怀疑＃2更接近解决我的问题，但我愿意采取其他方法来实现这一目标。

  <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
    <polygon points="0,0 100,20 100,80 0,100" style="fill:lightblue;">
    </polygon>
  </svg>
  <div class="trap-content"><span class="text-blend">Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
    Lorem ipsum dollar si amet.</span>
     <div>
  <a href="#" class="box-button">LEARN MORE</a>
    </div>
    </div>
   </div>

.trap-container {
  position: relative;
  width: 75vw;
  height: 50vh;
   background: pink;
   }
.trap-container svg {
  position: absolute;

}
.trap-content {
  display: inline-block;
  position: relative;
 top: 30%;
   bottom: 10%;
  color: white;
  padding-left: 3em;
   padding-right: 3em;
  border: 1px solid red;
}

.box-button {
  background-color: white;
  border: none;
  color: #f7941d;
  border-radius: 10px;
  padding: 5px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 8px 2px 1px;
  cursor: pointer;
  }

  .text-blend {
    mix-blend-mode: difference;
  }````

调整多边形大小时保持文本居中

0 个答案: