主页 / 问题 / 870659
Accepted
Даша Новикова
Asked:2020-08-20 00:32:20 +0000 UTC2020-08-20 00:32:20 +0000 UTC

三角形中的文本布局

  • 772

告诉我如何制作这样的三角形（看照片），以便其中有文字并且所有标题都正确对齐。我尝试使用 css 和作为背景图像，但它不起作用......非常感谢大家！）在此处输入图像描述

html

2 个回答

  1. Best Answer

    通过背景图像很正常地实现）。

      .text {
    display: inline-block;
    font-size: 30px;
    font-family: Arial;
    padding: 25px;
    background-color: #fff;
  }
  .text span {
    padding: 20px;
  }
  .text span.txt {
    padding: 0px;
  }
  .text span.bg {
    background-image: url(https://nordconnect.com/ru/wp-content/uploads/2016/06/customer-triangle.png);
    background-position: 100% center;
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    color: white;
  }
  .list {
    padding: 0px;
    margin: 0px;
    background-color: #fff;
  }
  .list li {
    list-style: none;
    display: inline-block;
  }
    <ul class="list">
  <li><p class="text"><span class="txt">Start</span><span class="bg">Ex</span></p></li>
  <li><p class="text">Support</p></li>
  <li><p class="text">About US</p></li>
</ul>

    • 2

  2. 疯狂愚蠢的方式：D

    .triangle-title {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  background: transparent url('https://cdn.icon-icons.com/icons2/934/PNG/512/play-black-triangle-interface-symbol-for-multimedia_icon-icons.com_72958.png') no-repeat right center / auto 100%;
  color: red;
  padding-right: 15px;
}
    <div class="triangle-title">Какой-то текст ЫЫ</div>

    • 2

相关问题