按列表浮动triange图片

Question

这是一些代码，但它并不完美，所有列表元素都不是静态的，需要按父块的高度均匀放置。所以应该好看。 现在它不是通过父块的公共高度放置，我做了50 px bttom margin

$('.triangle-list1, .triangle-list2').wrapAll('<div class="triangle-list-top">');
        $('.triangle-list3, .triangle-list4').wrapAll('<div class="triangle-list-middle">');
        $('.triangle-list5, .triangle-list6').wrapAll('<div class="triangle-list-bottom">');

        $('.triangle-list:last').addClass('triangle-list-last');

.tr {
	width: 440px;
	height: 325px;
	clip-path: polygon(50% 0, 0 100%, 100% 100%);
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	margin: 100px auto 0px;
}
.triangle-list-area {
	position: relative;
	margin-top: -337px;
	height: 450px;
}
.triangle-area {
	background-image: url("../img/circles-tr.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #2b2d33 !important;
}

.tr-area {
	position: relative;
	background-image: url("../img/figure-tr.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.triangle-list {
	font-size: 22px;
	width: 420px;
	position: relative;
}
.triangle-list1, .triangle-list3, .triangle-list5{
	text-align: right;
}
.triangle-list-top {
	margin-bottom: 20px;
  display: flex;
	justify-content: space-between;
}

.triangle-list-middle {
	margin-bottom: 20px;
	/*position: relative;*/
	justify-content: space-between;
	display: flex;
}
.triangle-list-middle .triangle-list {
	width: 360px;
}
.triangle-list-bottom {
	display: flex;
	justify-content: space-between;
}
.triangle-list-bottom .triangle-list {
	width: 275px;
}
.triangle-list-last {
	bottom: 0px;
	text-align: center;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "tr-area">
    <div class = "tr" style="background: url('https://orig00.deviantart.net/3bd9/f/2010/150/a/4/windows_pica_choo_by_yukamarie18.jpg')"></div>
        <div class = "triangle-list-area">
            <div class = 'triangle-list triangle-list1'>Element 1
            </div>
            <div class = 'triangle-list triangle-list2'>Element 2
            </div>
            <div class = 'triangle-list triangle-list3'>Element 3
            </div>
            <div class = 'triangle-list triangle-list4'>Element 4
            </div>
            <div class = 'triangle-list triangle-list5'>Element 5
            </div>
            <div class = 'triangle-list triangle-list6'>Element 6
            </div>
            <div class = 'triangle-list triangle-list6'>Element 7
            </div>
        </div>
</div>

也许有人知道如何创建三角形图片并按列表浮动此图片。

Answer 1

对于三角形 - 您可以通过css文件中特定img的addind边框使其变为simlpy。

    div#box {
      border-top: 100px solid transparent;
      border-right: 150px solid transparent;
      border-bottom: 300px solid #111;
      border-left: 150px solid transparent;
      margin: 40px;
      width: 0px;
    }

   <div id="box"></div>

第二个问题的答案：

要制作这样的布局 - 首先，您需要制作三列网格布局，然后为每个li（或者如果您想使用div）元素提供单独的位置方式就是你想要展示它的方式。像：

<div>
  <div class="row__first">
    <ul>...</ul>
  </div>
  <div class="row__second">
    <div class="img__mask-triangle">
      <img>
    </div>
    <span>...</span>
  </div>
  <div class="row__third">
    <ul>...</ul>
  </div>
</div>